我们应该在减速器中比较新状态和旧状态吗

Question

我在reducer函数中使用扩展运算符，所以当我分派动作时发生了什么，然后它正在创建新状态（obj），即使旧状态与新状态相同，所以它正在重新渲染反应组件。

由于对象可能很复杂，因此将新状态与旧状态进行比较是个好方法吗？深度比较？

const initialState = {};

export const reducer = (state = initialState, action: any = {}): any => {
  if (action.type === ActionTypes.RC) {
    return {
      ...state,
      ...action.config,
    };
  }
  return state;
};

或者 redux 在 mapStateToProps 中为您开箱即用吗？

Answer 1

这里有一些值得注意的事情。

React Redux 使用严格相等（引用相等）作为默认的比较方法。Redux 状态的不可变性质意味着对深层嵌套属性的任何更改都要求其所有祖先都必须是新的对象引用。

如果更新的a.b.c话a，a.b一定是新的对象。假设您有一个类似的同级属性树a.d.e。当您更新时，a.b.c它会导致a成为一个新的对象引用，但a.d和a.d.e是相同的。如果您有一个只需要了解的组件a.d，那么它不需要重新渲染来响应您的a.b.c更改。

这就是为什么每个组件应该只从状态中选择它需要的最少信息是很重要的。您应该连接更多单独的组件，而不是从状态中选择大量信息并通过 props 向下传递。您可以在同一组件中使用多个useSelector钩子来选择小的、颗粒状的状态片段。

您确实可以通过将比较函数作为第二个参数传递给挂钩来自定义相等比较useSelector。

如果您有一个组件订阅由该减速器控制的状态片段，那么您可以使用包shallowEqual中包含的函数react-redux。我不确定您问题中的减速器是您的根减速器还是您要传递给的东西combineReducers。我猜这只是一件。假设这是一个属性settings，并且您有一些updateSettings操作将新设置与现有设置合并。然后，当您有一个组件需要访问设置时，您可以这样做：

import { shallowEqual, useSelector } from 'react-redux'

const settings = useSelector(state => state.settings, shallowEqual);

这意味着组件只有在某些设置实际发生更改时才会重新渲染，即使是state.settings一个新对象。它正在对 的当前值state.settings和前一个值进行浅层比较。

可以使用像 lodash 这样的深度等于比较isEqual，但我不明白为什么你需要它，因为这个减速器正在制作浅复制。dispatch如果您需要在任何地方进行昂贵的检查，那么在组件中执行操作之前或从减速器返回新对象之前执行此操作似乎比在每次调用useSelector钩子时执行此操作更合乎逻辑。

您询问在返回新对象之前是否应该检查减速器中的更改state。这是一个好主意，它实际上是由创建的组合减速器所做的combineReducers，尽管它只检查浅层相等性。请参阅源代码第 177-201 行。如果所有单独的属性缩减器都返回与之前相同的对象，那么它将返回之前组合的对象state以维护对象引用。