Redux嵌套状态合并时如何有效保留特定属性？

问题场景 #

我们在Reducer中用后端返回的新数据更新嵌套数组，但像tooltip这类不属于后端响应的UI专属属性需要从现有状态中保留。

现有状态结构：

state.items = [
  {
    id: "1",
    details: [
      {
        id: "a",
        value: "foo",
        uiState: { tooltip: "original" },
      },
    ],
  },
];

后端返回的更新数据：

update = [
  {
    id: "1",
    details: [
      {
        id: "a",
        value: "bar", // ✅ 已更新
        // ❌ 缺少tooltip
      },
    ],
  },
];

当前手动合并方式：

details: oldItem.details.map((d, i) => ({
  ...d,
  ...newItem.details[i],
  uiState: d.uiState, // 保留UI状态
}))

这种方式在字段或嵌套结构增多时，会变得脆弱且难以维护。

解决方案与最佳实践 #

1. 使用Immer简化不可变更新 #

Redux官方推荐用Immer处理复杂的不可变更新逻辑，它允许你以"可变"写法编写代码，最终生成不可变状态。对于保留UI字段的场景，可直接复用原状态中的UI属性：

import { produce } from "immer";

const reducer = produce((draft, action) => {
  switch (action.type) {
    case "UPDATE_ITEMS":
      const newItems = action.payload;
      draft.items.forEach(oldItem => {
        const newItem = newItems.find(n => n.id === oldItem.id);
        if (newItem) {
          oldItem.details.forEach(oldDetail => {
            const newDetail = newItem.details.find(n => n.id === oldDetail.id);
            if (newDetail) {
              // 覆盖后端返回字段，保留原uiState
              Object.assign(oldDetail, newDetail);
              oldDetail.uiState = oldDetail.uiState;
            }
          });
        }
      });
      break;
  }
}, initialState);

2. 分离数据状态与UI状态 #

更健壮的模式是将后端返回的数据状态和UI专属状态完全分离存储，避免嵌套：

// 仅存储后端返回内容的数据状态
state.dataItems = [
  {
    id: "1",
    details: [
      { id: "a", value: "foo" },
    ],
  },
];

// 单独存储UI属性的状态，以ID为键
state.uiState = {
  itemDetails: {
    "a": { tooltip: "original" },
  },
};

更新数据时直接替换dataItems即可，UI状态不受影响。渲染时再将两者结合：

const detail = dataItem.details.find(d => d.id === "a");
const uiProps = uiState.itemDetails["a"] || {};
// 渲染时使用 {...detail, ...uiProps}

这种方式彻底避免合并逻辑，结构清晰，维护成本更低。

3. 封装通用合并工具函数 #

如果不想分离状态，可封装通用合并函数，指定需保留的字段或路径，在各Reducer中复用：

// 通用合并：保留指定字段，合并其余字段
function mergeWithPreserve(oldObj, newObj, preserveFields) {
  const merged = { ...oldObj, ...newObj };
  preserveFields.forEach(field => {
    if (oldObj[field] !== undefined) {
      merged[field] = oldObj[field];
    }
  });
  return merged;
}

// 嵌套数组的合并逻辑
function mergeNestedDetails(oldDetails, newDetails) {
  return oldDetails.map(oldDetail => {
    const newDetail = newDetails.find(n => n.id === oldDetail.id);
    if (!newDetail) return oldDetail;
    return mergeWithPreserve(oldDetail, newDetail, ["uiState"]);
  });
}

// 在Reducer中调用
details: mergeNestedDetails(oldItem.details, newItem.details)

Redux官方建议 #

Redux本身没有内置合并工具，但官方文档推荐通过优化状态结构（如分离数据与UI状态）或使用Immer简化不可变更新，减少手动合并的复杂度。

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