Javascript 在不改变状态的情况下，基于减速器中的给定索引更改嵌套数组值

我有一个使用数组的对象的减速器。我想根据给定的索引更改嵌套数组上的值。这段代码可以工作，但我似乎无法使用deepfreeze使我的测试正常工作。我试图在这里使用

.map

查看redux示例，以查找索引，但运气不佳。有什么想法吗

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;
  }
}

编辑：

对于那些在观看了一个有帮助的节目后好奇的人，我提出了以下建议：

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;
  }
}

---

使用建议的帮助器/库可能是最好的方法，但我的团队不希望添加另一个依赖项。

首先，

Object.assign（…）

只进行浅层复制。看

由于对象嵌套在对象嵌套的数组中，我强烈建议使用from react（如Rafael所述）。这些允许您执行以下操作：

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

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

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

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

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

---

（）

检查React

update

实用程序函数：您考虑过使用Immutable.js吗？一开始，它似乎对您在这里所做的事情很有帮助。@RafaelQuintanilha-我希望尽可能避免添加另一个依赖项。但如果真的有必要，我愿意接受。我似乎找不到任何示例显示与我现在针对这两个问题的解决方案类似的套管解决方案。我可能还不太了解图书馆，但是…谢谢你。那个书呆子的视频特别有启发性。