Redux reducer实现卡片编辑：如何替换State中指定ID的Tile对象

问题背景 #

我做了一个带多卡片的看板，点击卡片可编辑title和description，前序流程都正常，但在Reducer中响应edit操作更新store时遇到问题。

编辑操作Payload #

{
    "title": "dasdsads 123456",
    "description": "asdsadsad 1234565",
    "id": "badb4cbb-a66c-5c5d-57ee-5401eeaac0cd"
}

当前State结构 #

{
  "ideaBoard": {
    "tiles": [
      {
        "title": "dasdsads",
        "description": "asdsadsad",
        "id": "0e62aa65-d465-6b73-3747-7e2f654d96d6",
        "createdAt": "28/10/2022, 00:31:32"
      },
      {
        "title": "dasdsads 123",
        "description": "asdsadsad 123",
        "id": "badb4cbb-a66c-5c5d-57ee-5401eeaac0cd",
        "createdAt": "28/10/2022, 00:31:39"
      }
    ]
  }
}

未完成的Reducer方法 #

updateTile: (state, { payload }): any => {
  const update: any = state.tiles.find((tile) => tile["id"] === payload.id);

  return {

  };
},

预期思路 #

通过payload的id匹配state中对应卡片，将state内的目标对象替换为payload内容。

解决方案 #

核心遵循Redux不可变更新原则，不能直接修改原state，需返回全新的state结构，同时注意保留卡片原有字段（如createdAt）：

updateTile: (state, { payload }) => {
  // 遍历tiles数组，更新匹配id的卡片，其余保持不变
  const updatedTiles = state.ideaBoard.tiles.map(tile => {
    if (tile.id === payload.id) {
      // 合并原有属性与新内容，避免丢失createdAt等字段
      return { ...tile, ...payload };
    }
    return tile;
  });

  // 返回全新的state结构，逐层拷贝保证不可变性
  return {
    ...state,
    ideaBoard: {
      ...state.ideaBoard,
      tiles: updatedTiles
    }
  };
}

关键说明 #

• 用map替代find：find仅能找到目标项，map可生成全新数组替换原数组，符合不可变更新要求
• 属性合并：{...tile, ...payload}保留原卡片的所有属性，同时覆盖payload中的title和description
• 逐层拷贝：从根state到ideaBoard再到tiles，逐层拷贝对象/数组，避免直接修改原state

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