Redux Toolkit如何修改reducer实现对象单个键值的更新

问题根源 #

你当前的实现存在两个问题：

1. 语法错误：reducer内给state赋值误用了冒号:，应该使用等号=
2. 逻辑问题：直接全量替换userSettings对象，会导致payload中不存在的属性被清空

修复方案 #

Redux Toolkit 内部集成了Immer，支持直接修改draft状态，你可以选择以下任意一种写法修改reducer：

方案1：对象展开合并（写法最简洁） #

setUserSettings: (state, action) => {
    state.userSettings = {
        ...state.userSettings,
        ...action.payload
    }
}

方案2：遍历赋值（适合需要字段校验的场景） #

如果你需要限制只能更新已存在的配置字段、避免注入非法属性，可以用这种写法：

setUserSettings: (state, action) => {
    if (typeof action.payload !== 'object' || action.payload === null) return
    Object.entries(action.payload).forEach(([key, value]) => {
        if (Object.hasOwn(state.userSettings, key)) {
            state.userSettings[key] = value
        }
    })
}

效果说明 #

修改完成后你现有的dispatch调用逻辑不需要做任何调整，传入仅包含需要更新属性的对象即可，其余未修改的配置会自动保留。

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