如何修改Redux的UPDATE_USER reducer以批量更新用户对象属性？

其实你当前的reducer写法已经支持多属性更新了！不过我们可以把它写得更严谨，适配不同的state结构，避免后续扩展时出问题。

情况1：你的state本身就是用户对象 #

如果你的初始state直接是用户信息（比如const initialState = { name: 'azerty', email: 'azerty@yopmail.com', birthday: '1990' }），那现有代码完全可以处理多属性更新，调整下格式会更清晰：

case UPDATE_USER: {
  // 浅拷贝原state，用newDataUser中的属性覆盖对应字段
  // 未传入的属性（比如birthday）会保留原有值
  return {
    ...state,
    ...action.newDataUser
  };
}

比如当你调用：

updateUser({ 
  name: 'azerty updated', 
  email: 'azerty@yopmail.com updated' 
})

新的state会自动更新name和email，birthday依然是'1990'，完全符合你的需求。

情况2：你的state包含用户对象字段（更常见的场景） #

如果你的state结构是包含user字段的复合对象（比如const initialState = { user: { ... }, theme: 'light' }），那需要修改reducer，只更新user对象内部的属性，同时保留state里的其他字段：

case UPDATE_USER: {
  return {
    ...state, // 保留state中其他非用户相关的字段
    user: {
      ...state.user, // 保留原用户对象中未修改的属性
      ...action.newDataUser // 覆盖需要更新的属性
    }
  };
}

关键原理 #

这里用到的对象扩展运算符...是浅拷贝原对象，然后用后续对象的属性覆盖前面的同名属性。不管你在newDataUser里传入多少个属性，都会被正确更新，未传入的属性会保留原有值，完美支持多属性更新的需求。

另外要确认你的action creator和reducer的字段是匹配的——你当前的updateUser action creator已经正确把参数作为newDataUser传递，reducer里用action.newDataUser接收，这部分是没问题的。

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