0

MapStateToProps 和 useSelector 都使用类似的回调函数store => store.group 是否可以安全地改变这些值，例如在 MapStateToProps 中像这样：

const mapStateToProps = store => {
  const { group, level } = store;
  let { group } = store;
  if (level > 50) {
    group = `${group}-admin`;
  }
  return { group };
};

或在使用选择器：

const group = useSelector(store => {
  const { group, level } = store;
  let { group } = store;
  if (level > 50) {
    group = `${group}-admin`;
  }
  return { group };
});

而使用 useSelector 实际上也可以像这样在组件内部完成：

let [group, level] = useSelector(store => [store.group, store.level);
if (level > 50) {
  group = `${group}-admin`;
}
...

我的同事做了这样的事情，我不确定你是否应该let在那里使用。我只是感兴趣，如果这是可以接受的方式来处理这个，或者如果这会导致问题？我不需要其他解决方案。我知道如何使用 using 来做到这一点const。

4

1 回答 1

0

的作用之一redux是集中你的state逻辑：

来自：https ://redux.js.org/introduction/getting-started

您的应用程序的整个状态存储在单个商店内的对象树中。改变状态树的唯一方法是发出一个动作，一个描述发生了什么的对象。要指定操作如何转换状态树，请编写纯 reducer。

所以当你做这样的事情时：

const group = useSelector(store => {
  const { group, level } = store;
  let { group } = store;
  if (level > 50) {
    group = `${group}-admin`;
  }
  return { group };
});

这应该被认为是不好的做法。钩子应该返回你的useSelector一部分状态而不改变它。您正在调用内部对其进行变异useSelector，因此您返回的内容可能不在state对象中。

来自node_modules/react-redux/src/hooks/useSelector.js：

在此处输入图像描述

看到他们甚至将结果命名为selectedState = selector(storeState)as selectedState。而且您没有state在通话中选择一个。你正在改变结果。

虽然在您的示例中，您只是更改了从 读取的字符串state，但这是一种不好的做法，因为有一天您可能会在state不通过action/reducer调度对其进行更改的情况下更改对象。这肯定会在某些时候破坏您的代码。

例如：

const group = useSelector((state) => {
  let { someObject } = state;
  if (someCondition) {
    someObject.someProperty = someValue  // YOU ARE MUTATING STATE OUTSIDE A REDUX REDUCER
  }
  return someObject;
});

我认为你应该做的：

SomeComponent.js

const { group, level } = useSelector((state) => state);
const newGroup = level > 50 ? `${group}-admin` : group;

如果你想要更新groupRedux 上的 state 属性，你应该改为 dispatch 一个 action 由 reducer 处理。

于 2020-09-18T12:47:25.973 回答