如何使用Redux Toolkit的createSlice更新嵌套JSON状态？

问题描述 #

我在使用createSlice更新状态时采用了一种不够简洁的方法。希望根据dispatch传入的JSON对象键值对动态更新状态，目前是逐个循环遍历[key, value]对来更新，这种方式不太理想。尝试过用{ ...state.user, action.payload }这类浅拷贝方式设置状态，但直接这么做没生效，似乎用法上有遗漏，求解决办法。

原代码（带中文注释） #

import { createSlice } from '@reduxjs/toolkit'

export const userSlice = createSlice({
  name: 'user',
  initialState: {
    user: {},
  },
  reducers: {
    set_user: (state, action) => {
      // Redux Toolkit允许在reducer里写"可变"逻辑
      // 实际不会真的修改状态，因为它用了Immer库，会基于draft状态生成全新的不可变状态
      state.user = action.payload
    },
    update_user: (state, action) => {
      console.log(action.payload)
      // 示例payload：{x: 'y', z: '1'}
      for (const [key, value] of Object.entries(action.payload)) {
        console.log(key)
        console.log(value)
        state.user[key] = value
      }
    },
})

优化方案 #

你的循环写法其实是合法的（Immer会处理状态不可变性），但确实可以更简洁。之前的浅拷贝写法没生效，是因为你只是做了拷贝，但没有把新对象赋值给state.user。这里提供两种更优的写法：

方法一：利用Immer的可变语法（推荐）

直接用Object.assign把payload合并到state.user上，Immer会自动处理成不可变更新：

update_user: (state, action) => {
  Object.assign(state.user, action.payload)
}

方法二：传统不可变更新写法

如果更习惯纯不可变的写法，可以直接返回新的state对象：

update_user: (state, action) => {
  return {
    ...state,
    user: {
      ...state.user,
      ...action.payload
    }
  }
}

补充说明 #

• 方法一是Redux Toolkit官方推荐的风格，借助Immer的能力，写起来像直接修改状态，但底层依然是不可变的。
• 方法二完全不依赖Immer的可变特性，遵循传统Redux的不可变更新规则，同样有效。
• 你的原循环写法并没有“不安全”的问题，只是不够简洁，上面两种方式都能实现同样的动态更新效果。

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