如何在Redux Toolkit中修改数组类型状态的属性？

你遇到的问题源于对Redux Toolkit内置Immer包装的Proxy对象的误解，以下是两种可行的解决方法：

方法一：通过Immer直接修改目标对象 #

Redux Toolkit的Immer允许你在reducer中"直接"操作状态，即使state是Proxy对象，数组的find方法依然可以正常调用。找到目标对象后直接修改属性即可，Immer会自动将这个操作转换为符合不可变原则的更新：

enterUser(state, action) {
  const targetUser = state.users.find(user => user.id === action.payload);
  if (targetUser) {
    targetUser.isEnter = true;
  }
},
exitUser(state, action) {
  const targetUser = state.users.find(user => user.id === action.payload);
  if (targetUser) {
    targetUser.isEnter = false;
  }
}

调试时看到的Proxy是Immer的包装层，不会影响数组方法的正常执行，加个存在判断可以避免找不到用户时的报错。

方法二：显式生成新数组（手动不可变更新） #

如果你更倾向于手动实现不可变更新，可以用map方法生成新数组，仅对目标id的对象修改属性，其余对象保持原样：

enterUser(state, action) {
  state.users = state.users.map(user => 
    user.id === action.payload ? {...user, isEnter: true} : user
  );
},
exitUser(state, action) {
  state.users = state.users.map(user => 
    user.id === action.payload ? {...user, isEnter: false} : user
  );
}

为什么current(state.users)不行？ #

current()函数返回的是当前状态的只读快照，它仅用于调试时查看状态的真实值，不能用来修改状态，因此修改快照内的对象属性不会同步到真实state中。

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