如何在Redux中向现有状态对象追加数据而非覆盖？

我明白你现在的痛点——你的loadWorkflowObject函数目前是直接用新创建的审批数据替换掉transition_approvals字段，而不是把新项追加到现有列表里。咱们来快速修复这个问题：

问题根源 #

你的现有代码：

const loadWorkflowObject = (state, action) => { 
  return updateObject(state, { workflowobject: { ...state.workflowobject, [action.label]: action.payload } }) 
}

这里的[action.label]: action.payload是直接替换了workflowobject中对应字段的全部内容，而不是在原有数据基础上添加新项。

修复方案：修改Reducer实现追加逻辑 #

假设transition_approvals是一个数组（适合存储列表型数据），我们需要先获取现有数组，再把新的审批项追加进去：

const loadWorkflowObject = (state, action) => {
  // 1. 获取当前已有的数据，若不存在则默认空数组
  const existingItems = state.workflowobject[action.label] || [];
  // 2. 把新数据追加到数组末尾（使用扩展运算符保持immutable）
  const updatedItems = [...existingItems, action.payload];
  
  // 3. 更新状态树，保持不可变性
  return updateObject(state, {
    workflowobject: {
      ...state.workflowobject,
      [action.label]: updatedItems
    }
  });
}

可选：如果是键值对结构（按ID存储） #

如果你的transition_approvals是按ID存储的对象（比如方便通过ID快速查找），可以改成这样的追加逻辑：

const loadWorkflowObject = (state, action) => {
  const existingItems = state.workflowobject[action.label] || {};
  // 假设后端返回的新数据包含唯一ID字段
  const updatedItems = {
    ...existingItems,
    [action.payload.id]: action.payload
  };
  
  return updateObject(state, {
    workflowobject: {
      ...state.workflowobject,
      [action.label]: updatedItems
    }
  });
}

验证要点 #

• 确保你的Saga中返回的data.data.data是单个的transition_approval对象（而非数组），这样追加到数组里才会得到正确的列表。
• 保持Redux状态的不可变性：始终使用扩展运算符(...)或Immer这类工具来创建新的状态对象，不要直接修改原有状态。

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