Redux中更新对象属性并保留其余内容？代码修改状态无效求助

你遇到的问题很典型——错误地把嵌套在user对象里的level当成了state的顶层属性来更新，所以虽然你写了level: action.level，但实际只是在state里新增了一个顶层的level字段，完全没碰到底层user.level的值，自然看不到变化。

错误原因拆解 #

看你LOGIN_SUCCESS的代码，user是state下的一个子对象，结构大概是这样的：

state = {
  // 其他属性...
  user: {
    loggedIn: true,
    level: 'default'
  }
}

而你在UPDATE_PACKAGE里直接返回{ ...state, level: action.level }，相当于给state加了一个新的顶层属性level，但user.level还是原来的'default'，完全没被修改。

正确的更新方式 #

Redux要求state是不可变的，所以更新嵌套对象时，需要逐层拷贝并修改：

1. 先拷贝整个state（用...state）
2. 再拷贝user对象（用...state.user），保留它的其他属性（比如loggedIn）
3. 最后替换user里的level属性

修改后的UPDATE_PACKAGE代码如下：

case 'UPDATE_PACKAGE': {
  return {
    ...state,
    user: {
      ...state.user, // 保留user的原有属性
      level: action.level // 更新level
    }
  };
}

额外建议 #

如果后续你的state结构更复杂，手动写嵌套拷贝会很繁琐，推荐使用Redux Toolkit（官方推荐的Redux开发工具），它内置的Immer库可以让你用"可变"的写法实现不可变更新，代码会简洁很多：

// 用Redux Toolkit的createSlice示例
import { createSlice } from '@reduxjs/toolkit';

const initialState = { /* 你的初始state */ };

const appSlice = createSlice({
  name: 'app',
  initialState,
  reducers: {
    loginSuccess: (state) => {
      state.user.loggedIn = true;
      state.user.level = 'default';
    },
    updatePackage: (state, action) => {
      state.user.level = action.payload; // 直接修改，Immer会帮你处理不可变
    }
  }
});

export const { loginSuccess, updatePackage } = appSlice.actions;
export default appSlice.reducer;

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