Redux Toolkit reducer直接赋值state不更新，修改属性却生效

问题原因 #

Redux Toolkit的createSlice依赖Immer库实现不可变更新的语法糖。Immer的工作机制是监听对传入的draft state（草稿状态）对象的修改操作，以此生成新的不可变状态。

当你直接执行state = action.payload或state = initialState时，本质是替换了函数参数state的引用指向，而非修改原draft对象的内容。Immer无法追踪到这种引用替换操作，因此不会生成新的状态，导致selectors无法捕获到变更。

正确的实现方式 #

方式1：修改draft对象的属性（已验证可行）

直接对state的属性进行赋值修改，Immer会自动追踪这些变更并生成新的不可变状态：

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  value: null,
  type: null
}

export const messageSlice = createSlice({
  name: 'message',
  initialState: initialState,
  reducers: {
    setMessage: (state, action) => {
      state.value = action.payload.value
      state.type = action.payload.type
    },
    clearMessage: state => {
      state.value = null
      state.type = null
    }
  }
})

方式2：直接返回新的state对象

如果需要替换整个state对象，直接在reducer中返回新对象即可，Immer会识别并使用这个返回值作为新的状态：

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  value: null,
  type: null
}

export const messageSlice = createSlice({
  name: 'message',
  initialState: initialState,
  reducers: {
    setMessage: (state, action) => {
      // 直接返回新的state对象
      return action.payload
    },
    clearMessage: state => {
      // 返回初始状态作为新的state
      return initialState
    }
  }
})

关键总结 #

• 避免直接给reducer的state参数赋值，这会绕过Immer的变更追踪机制
• 要么修改draft对象的属性，要么直接返回新的state对象，两种方式都能让Immer正确生成新状态，确保selectors捕获到变更

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