javascript - 根据 reducer 中的给定索引更改嵌套数组值，同时不改变状态

Question

我有一个处理带有数组的对象的 reducer 。我想根据给定的索引更改嵌套数组上的值。这段代码有效，但我似乎无法使用深度卡住让我的测试工作。我试图在这里查看 redux 示例 http://redux.js.org/docs/basics/Reducers.html使用 .map 来查找索引没有运气。有什么想法吗？

export default function myReducer(state = { toDisplay: [] }, action) {
  const { type, groupIndex, itemIndex } = action;
  const newObject = Object.assign({}, state);
  switch (type) {
    case actionTypes.TOGGLE_GROUP:
      newObject.toDisplay[groupIndex].isSelected = newObject.toDisplay[groupIndex].isSelected ? false : 'selected';
      return newObject;
    case actionTypes.TOGGLE_ITEM:
      newObject.toDisplay[groupIndex].values[itemIndex].isSelected = newObject.toDisplay[groupIndex].values[itemIndex].isSelected ? false : true;
      return newObject;
    default:
      return state;
  }
}

编辑:

对于观看完有用的文章后感到好奇的人 redux video我想出了这个:

export default function myReducer(state = { toDisplay: [] }, action) {
  const { type, groupIndex, itemIndex } = action;
  switch (type) {
    case actionTypes.TOGGLE_GROUP:
      return {
        ...state,
        toDisplay: [
          ...state.toDisplay.slice(0, groupIndex),
          {
            ...state.toDisplay[groupIndex],
            isSelected: state.toDisplay[groupIndex].isSelected ? false : 'selected'
          },
          ...state.toDisplay.slice(groupIndex + 1)
        ]
      };
    case actionTypes.TOGGLE_ITEM:
      return {
        ...state,
        toDisplay: [
          ...state.toDisplay.slice(0, groupIndex),
          {
            ...state.toDisplay[groupIndex],
            values: [
              ...state.toDisplay[groupIndex].values.slice(0, itemIndex),
              {
                ...state.toDisplay[groupIndex].values[itemIndex],
                isSelected: state.toDisplay[groupIndex].values[itemIndex].isSelected ? false : true
              },
              ...state.toDisplay[groupIndex].values.slice(itemIndex + 1)
            ]
          },
          ...state.toDisplay.slice(groupIndex + 1)
        ]
      };
    default:
      return state;
  }
}

使用建议的帮助器/库可能是最好的路线，但我的团队希望不添加其他依赖项。

Answer 1

首先，Object.assign(...) 仅执行浅复制。请参阅here .

由于您有嵌套在对象内的数组内的对象，我强烈推荐 immutability helpers来自 react (正如拉斐尔提到的)。这些允许您执行以下操作:

case actionTypes.TOGGLE_GROUP:
  return update(state, {
    toDisplay: {
      [groupIndex]: {
        isSelected: {$set: newObject.toDisplay[groupIndex].isSelected ? false : 'selected'}
      }
    }
  });

如果您希望使用原始 js 修改数组内的简单值，那么您可以使用如下内容:

return list
  .slice(0,index)
  .concat([list[index] + 1])
  .concat(list.slice(index + 1));

( source )