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

如何解决Redux，MapStateToProps / useSelector：更改这些值是否安全？

MapStatetoProps和useSelector都可以使用类似的回调store => store.group 像这样在MapStatetoProps中更改这些值是否安全：

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

或在useSelector中：

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来代替它。

解决方法

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对象进行变异，而不会通过{{1 }}派遣。在某些时候肯定会破坏您的代码。

例如：

action/reducer

我认为您应该做什么：

SomeComponent.js

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

如果您要更新Redux上的const { group,level } = useSelector((state) => state); const newGroup = level > 50 ? `${group}-admin` : group;状态属性，则应分派一个动作，以由reducer处理。