如果不必在减速器中更新数组，如何在 redux 状态下正确返回数组？

问题描述

我使用 aurelia-store 状态管理库来管理状态。这个问题不是针对 Aurelia 商店的，而是针对一般的 redux 最佳实践，因为 Aurelia 商店非常相似。

我有一个从 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 {
    ...state,units: [...state.units]
  };

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

解决方法

你应该创建一个新对象的原因是因为 React 组件会检查 prop 的变化，以便知道何时重新渲染。 如果你只是简单地修改一个对象并再次将它作为 prop 传入，React 不会知道发生了什么变化并且无法重新渲染。

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

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