Redux状态已更新但未触发重渲染，如何高效解决？

问题核心是Redux的更新机制：只有当state的引用发生变化时，才会触发组件重渲染。你的myMergeFunction直接修改原existingValues对象并返回同一引用，Redux会判定state.edits未变更，因此组件不会重渲染。深克隆虽能解决，但大对象的全量克隆性能开销极高，以下是分层的高效解决方案：

1. 改造合并函数，仅创建变更路径的新引用 #

最根本的解决方式是修改myMergeFunction，不直接修改原对象，仅在发生变更的层级生成新对象，未变更层级复用原引用。这种方式的性能开销远低于全量克隆，因为只复制真正变化的部分。

顶层对象合并示例 #

// 原错误实现（直接修改原对象）
function myMergeFunction(edits, existing) {
  Object.assign(existing, edits);
  return existing;
}

// 改为非破坏性合并（仅创建新顶层对象）
function myMergeFunction(edits, existing) {
  return {
    ...existing,
    ...edits
  };
}

深层嵌套对象合并示例 #

如果是多层嵌套结构，针对修改的子层级递归创建新对象：

function deepMerge(edits, existing) {
  const merged = { ...existing };
  Object.keys(edits).forEach(key => {
    if (typeof edits[key] === 'object' && edits[key] !== null && existing[key]) {
      // 仅在子对象变更时递归合并，生成新的子引用
      merged[key] = deepMerge(edits[key], existing[key]);
    } else {
      merged[key] = edits[key];
    }
  });
  return merged;
}

2. 用Immer简化不可变更新 #

如果手动编写不可变逻辑繁琐，可以使用Immer库。它允许你用"可变"的写法修改对象，但内部会自动生成仅包含变更路径的不可变新对象，性能与手动优化的逻辑接近，且无需大幅修改现有myMergeFunction。

安装Immer后修改reducer：

import { produce } from 'immer';

case types.MY_ACTION:
  return produce(state, draft => {
    // 直接修改draft，Immer会自动捕获变更并生成新的不可变对象
    myMergeFunction(edits, draft.edits);
  });

3. 拆分大对象为多个state切片 #

如果edits对象体积极大，可将其拆分为多个独立的Redux state切片。这样每次仅更新目标切片，既减少合并开销，还能让组件只订阅自身需要的切片，避免不必要的重渲染：

// 拆分后更新示例
case types.USER_EDIT_ACTION:
  return {
    ...state,
    userEdits: myMergeFunction(userEdits, state.userEdits)
  };

case types.SETTINGS_EDIT_ACTION:
  return {
    ...state,
    settingsEdits: myMergeFunction(settingsEdits, state.settingsEdits)
  };

为什么不推荐深克隆？ #

深克隆会复制整个大对象，即使仅一个属性变更，也会生成全新对象，导致：

• 不必要的内存占用，大对象克隆可能引发GC压力
• 所有订阅edits的组件都会重渲染，哪怕它们只用到未变化的部分

而上述方案均为最小化引用变更，既满足Redux的不可变性要求，又保证了性能。

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