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

【问题标题】：Redux, MapStateToProps/useSelector: Is it safe to mutate those valuesRedux，MapStateToProps/useSelector：改变这些值是否安全
【发布时间】：2020-09-18 11:10:25
【问题描述】：

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。

【问题讨论】：

标签： react-redux mapstatetoprops

【解决方案1】：

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) 的结果命名为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 处理。

【讨论】：