Redux中Reducer用spread operator浅拷贝如何保证状态不可变性？

核心结论 #

• Redux的store支持任意层级的嵌套state结构，并非只能用一级对象
• Redux库内部不会自动执行深拷贝，示例中的spread operator就是实际的浅拷贝行为，state的更新逻辑需要开发者自行处理

关于Redux State的结构限制 #

Redux对state的结构没有强制要求，你可以根据业务需求设计嵌套对象、数组等复杂结构，比如：

const initialState = {
  user: {
    name: 'Alice',
    settings: {
      darkMode: true,
      notifications: {
        email: true,
        push: false
      }
    }
  },
  todos: [
    { id: 1, text: 'Learn Redux', completed: false },
    { id: 2, text: 'Build app', completed: true }
  ]
}

这种多层嵌套的结构完全符合Redux的要求，没有任何限制。

关于state拷贝的真相 #

Redux的核心要求是不可变更新——即永远不要直接修改原state，而是返回一个新的state对象。但它只要求顶层对象是新引用，嵌套层级的更新需要你手动逐层做浅拷贝，而非依赖库的自动深拷贝。

比如要修改上述state中的user.settings.darkMode，正确的不可变更新写法是逐层使用spread operator：

function userReducer(state = initialState, action) {
  if (action.type === 'user/toggleDarkMode') {
    return {
      ...state, // 拷贝顶层state
      user: {
        ...state.user, // 拷贝user层级
        settings: {
          ...state.user.settings, // 拷贝settings层级
          darkMode: !state.user.settings.darkMode // 修改目标属性
        }
      }
    }
  }
  return state
}

这种逐层浅拷贝的方式，只会为修改过的层级创建新对象，未修改的层级保持原引用，是Redux官方推荐的高效更新方式。全量深拷贝反而会因创建大量不必要的新对象降低性能。

你提到的_.cloneDeep、structuredClone或JSON.parse(JSON.stringify())等深拷贝方法，仅适合少数场景（比如state结构极深且需要全量更新时），但并非Redux的常规用法。

回到你提供的counter示例，由于它的state是一级对象，一次spread就足够完成不可变更新；如果是嵌套结构，就需要逐层处理，Redux不会自动帮你完成深拷贝。

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