Redux，MapStateToProps/useSelector：改变这些值是否安全

Question

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。我只是想知道这是可以接受的处理方式还是会导致问题？我不需要其他解决方案。我知道如何使用 const 代替。

Answer 1

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

发件人：https://redux.js.org/introduction/getting-started

The whole state of your app is stored in an object tree inside a single store. The only way to change the state tree is to emit an action, an object describing what happened. To specify how the actions transform the state tree, you write pure reducers.

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

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

这应该被认为是不好的做法。 useSelector 钩子应该 return 你的状态的一部分而不改变它。你在 useSelector 调用中改变它，所以你 returning 了一些可能不在 state 对象中的东西。

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

看到他们甚至将 selectedState = selector(storeState) 的结果命名为 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;

如果您想要的是在 Redux 上更新 group 状态属性，您应该改为分派一个由 reducer 处理的操作。

Redux，MapStateToProps/useSelector：改变这些值是否安全

Redux, MapStateToProps/useSelector: Is it safe to mutate those values

react-redux

mapstatetoprops