如何在React Reducer中为Redux父对象添加子元素？

嘿，我来帮你搞定这两个Redux的问题，都是日常开发里容易踩的坑，咱们一个个说：

首先得明确：mapStateToProps只有当它依赖的state部分引用发生真实变化时，才会触发组件重渲染。你现在用return { ...state, parent_object: action.value }的写法，理论上如果action.value是全新的对象，应该能触发更新，但可能是这几个地方出了问题：

• 检查深克隆的有效性：如果你用的是JSON.parse(JSON.stringify(...))这种方式深克隆，遇到包含函数、Symbol、循环引用的对象时会失效，导致克隆后的对象和原对象可能有隐性关联；如果用的是lodash的cloneDeep这类工具，确认是否正确引入和调用了。
• 确认reducer的更新逻辑：你用...state扩展原state是对的，但如果parent_object是多层嵌套，而你只是修改了深层属性却没更新上层引用（不过你说深克隆了父对象，这应该没问题），或者action.value其实还是原对象的引用（比如克隆操作没生效），那Redux就检测不到变化。
• 检查connect的配置：确认你的组件确实通过connect绑定了store，且mapStateToProps里明确依赖了parent_object；另外默认connect是纯组件，只有当props真正变化时才会重渲染，如果你的组件设置了pure: false，反而可能导致异常。

更稳妥的做法是放弃深克隆，改用局部不可变更新，比如要给parent_object添加新子对象，直接这样写：

return {
  ...state,
  parent_object: {
    // 浅拷贝原父对象的所有属性
    ...state.parent_object,
    // 添加新的子对象，这里用你实际的键名和数据
    newChild: action.newChildData
  }
}

这种方式既保证了parent_object是新的引用，能被mapStateToProps检测到，又只更新了需要变化的部分，性能更好。

答案是：完全没必要，还会拖慢性能。

Redux的核心要求是「不可变更新」，但不是让你把整个对象都克隆一遍，而是只需要更新到发生变化的那一层就行。比如你的parent_object有10个子对象，现在只需要加第11个，那你只需要创建parent_object的浅拷贝，然后添加新子对象——那些没变化的子对象，保持原引用就好。

深克隆的坏处很明显：

1. 性能开销大：如果parent_object结构复杂、数据量大，深克隆会耗费额外的CPU和内存资源。
2. 引发不必要的重渲染：所有依赖parent_object的组件，都会因为整个对象被克隆（引用变化）而触发重渲染，哪怕只有一个子对象变了。

所以替换深克隆的最优解，就是上面提到的「层级式扩展运算符更新」，既符合Redux的不可变原则，又能避免不必要的性能损耗。

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