Redux userReducer状态提前更新问题求助

核心问题 #

你在userReducer的SetUser分支里直接修改了原状态对象：

state.data = payload;
return state;

Redux要求reducer必须是纯函数，绝对不能直接修改（mutate）传入的state参数——Redux依赖状态的引用变化来检测更新，直接修改原state会导致旧状态被提前覆盖，引发不可预测的状态异常。

修复后的userReducer代码 #

import { User_Action_Types } from "./user.types";

const INITIAL_STATE = {
  data: {
    _id: "",
    name: "",
    email: "",
    password: "",
  },
};

export const userReducer = (state = INITIAL_STATE, action) => {
  const { type, payload } = action;
  console.log({ action, state });
  switch (type) {
    case User_Action_Types.SetUser: {
      // 通过不可变更新返回全新的状态对象，不触碰原state
      return {
        ...state,
        data: { ...payload } // 浅拷贝payload，避免后续意外修改原数据
      };
    }
    case User_Action_Types.ResetUser: {
      return INITIAL_STATE;
    }

    default:
      return state;
  }
};

关键说明 #

• 使用扩展运算符(...)拷贝原状态的顶层属性，确保返回一个新的对象引用，让Redux能正确识别状态变化
• 对data属性也做浅拷贝，如果payload是嵌套更深的对象，可使用Immer库简化不可变更新操作
• 严格遵循Redux的纯函数原则后，旧状态被提前覆盖的问题就会解决

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