如何用Spread Operator编写Reducer实现Idea元素新增与页面合并？

咱们一步步来解决这个问题，核心就是利用展开运算符的特性，结合对现有state的判断，实现"存在则合并，不存在则新增"的逻辑。

第一步：解构Payload，提取关键字段 #

首先把payload里的有用字段解构出来，过滤掉不需要的ideaID和pagePosition（这两个是定位用的，不属于页面对象本身），让代码更清晰：

const { ideaID, pagePosition, title, desc } = action.payload;

第二步：实现核心逻辑（判断+合并/新增） #

接下来就可以针对两种场景处理：如果目标Idea已存在，就合并新页面；如果不存在，就创建新的Idea条目。用展开运算符可以很优雅地完成这个操作：

case 'ADD_IDEA':
  const { ideaID, pagePosition, title, desc } = action.payload;
  // 获取已有的Idea对象，不存在则用空对象兜底
  const existingIdea = state[ideaID] || {};
  // 构建更新后的Idea：保留原有页面，添加/更新当前页面
  const updatedIdea = {
    ...existingIdea,
    [pagePosition]: { title, desc }
  };
  // 更新整个state，保留其他Idea的同时替换/新增当前Idea
  return {
    ...state,
    [ideaID]: updatedIdea
  };

代码逻辑拆解 #

• existingIdea = state[ideaID] || {}：如果state里已经有这个ideaID对应的条目，就复用它；没有的话初始化空对象，避免后续展开报错。
• { ...existingIdea, [pagePosition]: { title, desc } }：展开原有Idea的所有页面对象，再用当前pagePosition作为键，插入新的页面数据——如果该位置已有页面，会直接覆盖；如果是新位置，就新增条目。
• { ...state, [ideaID]: updatedIdea }：最后展开整个原有state，把处理后的Idea替换/新增到对应位置，保证其他Idea的数据不会丢失。

纠正你之前写法的问题 #

你之前尝试的代码有两个关键问题：

1. 对象字面量里不能直接嵌套对象展开，必须用[键名]: 处理后的对象的键值对形式来更新。
2. [...action.payload]是错误用法：payload是对象不是数组，而且你不需要把ideaID和pagePosition放进页面对象里，应该只提取title和desc。

测试场景验证 #

• 第一次收到payload {ideaID: 1, pagePosition: 0, title:'any', desc: 'abc'}，处理后state会变成：

  {
    ideaID1: { 0: { title:'any', desc: 'abc' } }
  }
  

• 第二次收到payload {ideaID: 1, pagePosition: 1, title:'any', desc: 'per'}，state会合并为：

  {
    ideaID1: { 
      0: { title:'any', desc: 'abc' },
      1: { title:'any', desc: 'per' }
    }
  }
  

• 收到新ideaID的payload {ideaID: 2, pagePosition: 0, title:'new', desc: 'test'}，state会新增条目：

  {
    ideaID1: { ... },
    ideaID2: { 0: { title:'new', desc: 'test' } }
  }
  

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