Redux：如果没有变化，在 reducer 和 return 原始状态进行深度比较是否很常见？

Question

操作：从服务器获取一组数据。
Reducer：保存一个数据数组来存储。

我的减速器以预期的不可变方式保存数据数组：

return {
  ...state,
  arrayOfData: fetchedArrayOfData,
};

获取操作周期性发生，但数组的内容大部分时间保持不变。然而，由于每次都会保存一个新的引用，因此该数据的选择器将被视为“已更改”，并且如果用作 creatorSelector.

的输入则不会很好地记忆

我能想到的唯一解决办法是在reducer进行deep-compare，如果内容相同，直接return原始状态：

return state;

如果这个常见practice/pattern?

注意：我试着环顾四周，大多数项目都在做我正在做的事情（即 return 新状态对象），这不会很好地记忆并导致选择器转换为运行.

Answer 1

有一些解决方案，如评论中提到的使用 immutableJS，但您可以通过将 fetchedArrayOfData 与最后一个（存储在您的州）。

假设有一个比较函数给出两个数组并比较它们。

在减速器中：

const previousFetchedData = state.fetchedArrayOfData;
const newFetchedData = action.payload.fetchedArrayOfData;

const resultOfComparision = isSameArray(previousFetchedData, newFetchedData) // true or false

if (resultOfComparision) { // case of same arrays
  return state
} else { // case of different arrays
  ...state,
  arrayOfData: fetchedArrayOfData,
};

注意 1： 您可以创建自己的比较函数，但 Whosebug 的 this post 中有许多不错的函数可供您使用。

注意 2： 使用 immutableJs 和来自 reducer 的条件 returning 数据很常见（在这种情况下），不要担心使用它们.

注3：您还可以使用传统方式在组件级别比较您的数据shouldComponentUpdate。

Node 4:使用像redux-saga这样的中间件会有用，你也可以在saga[中实现isSameArray函数 然后派发适当的动作。详细阅读 saga 文档。

注意 5： 最好的解决方案（在我看来）是在具有 304 状态的后端服务上处理这种情况，这意味着 不修改。然后您可以根据响应状态轻松确定正确的操作。有关 MDN 文档的更多信息。

Redux：如果没有变化，在 reducer 和 return 原始状态进行深度比较是否很常见？

Redux: Is it common to do deep-compare at reducer and return original state if no change?

javascript

redux

react-redux