Redux如何编写ITEM_REMOVED分支逻辑删除嵌套在数组内的指定元素

修改方案 #

Redux Reducer要求所有状态更新都遵循不可变原则，不能直接修改原状态，你可以逐层修改对应字段即可，修改后的ITEM_REMOVED分支逻辑如下：

const boardsReducer = (state = initialState, action) => {
  switch (action.type) {
    case ITEM_REMOVED:
      return {
        ...state,
        // 遍历所有board
        boards: state.boards.map(board => {
          // 非目标board直接原样返回
          if (board.id !== action.boardId) return board
          // 匹配到目标board后，过滤掉要删除的item
          return {
            ...board,
            items: board.items.filter(item => item.id !== action.itemId)
          }
        })
      };
    default:
      return state;
  }
};

逻辑说明 #

• 先用扩展运算符拷贝顶层state对象，保证顶层状态引用更新
• 用map方法遍历原boards数组，返回全新的boards数组，不修改原数组
• 非目标id的board直接返回原有对象，减少不必要的对象创建
• 匹配到目标board后，拷贝该board对象，仅更新items字段：用filter方法过滤掉id匹配的待删除条目，生成新的items数组

注意：请提前确保代码中ITEM_REMOVED常量已经被正确声明，否则会抛出未定义的引用错误。

内容的提问来源于stack exchange，提问作者Porty