如果不必在 reducer 中更新数组，如何在 redux 状态下正确 return 数组？

Question

我正在使用 aurelia-store 状态管理库来管理状态。这个问题并不特定于 Aurelia store，但实际上是针对一般的 redux 最佳实践，因为 Aurelia store 非常相似。

我有一个从 API 中获取单元更新的操作，如下所示：

export const fetchNewUnits = async (state: State): Promise<State> => {
  const fetchedUnits = await apiClient.getUnitsMarkers();

  // no new updates so don't trigger change in units
  // IS THIS ACCEPTABLE?
  if (fetchedUnits.length === 0) {
    return {
      ...state,
      highwaterMark: new Date()
    };
  }

  const units: UnitMarker[] = state.units.slice();

  _.forEach(fetchedUnits, (newUnit) => {
    // look for matching unit in store
    const idx = _.findIndex(units, {
      imei: newUnit.imei
    });

    // unit was found in store, do update
    if (idx !== -1) {
      // replace the unit in the store
      const replacement = new UnitMarker({...newUnit});
      units.splice(idx, 1, replacement);
    }
  });

  // OR SHOULD I ALWAYS DEEP COPY THE ARRAY REFERENCE AND IT'S OBJECTS
  return {
    ...state,
    highwaterMark: new Date(),
    units: [...units]
  };
};

如果我没有任何单位更改（即我的商店是最新的），我可以简单地 return 带有展开运算符的状态，如第一个 return 语句所示吗？这样可以吗，因为我没有修改对象？

或者我是否总是需要进行深度替换，例如：

return {
    ...state,
    highwaterMark: new Date(),
    units: [...state.units]
  };

即使数组中的对象没有变化？

Answer 1

之所以要创建一个新对象，是因为 React 组件会检查 prop 更改，以便知道何时重新渲染。如果您简单地修改一个对象并将其作为 prop 再次传递，React 将不知道发生了什么变化并且将无法重新渲染。

所以在您的情况下，问题是：您是否要重新渲染？如果你不这样做，return使用同一个对象就可以了，一个简单的“return状态”会让 React 知道不需要重新渲染。

参见：Why is the requirement to always return new object with new internal references

如果不必在 reducer 中更新数组，如何在 redux 状态下正确 return 数组？

How to correctly return array in redux state, if the array did not have to be updated in the reducer?

redux

react-redux

aurelia

immutability

aurelia-store