React-Redux中Redux Toolkit动态更新State失败问题求助

问题场景 #

我在使用React-Redux时遇到了一个问题：创建了名为Introduction的slice，尝试通过扩展运算符动态更新state字段时无效，但直接给state的具体字段赋值却能正常工作。

Introduction Slice代码 #

import { createSlice } from "@reduxjs/toolkit";
import { IntroductionFields } from "../helpers/interface";

const initialState: IntroductionFields = {
  fullName:'',
  subtitle:'',
  description:'',
  location:'',
  email:'',
  portfolio: {name:'' , url:''},
  project: {name: '' , url: ''},
  learning: '',
  collaborating: '',
  else: '',
}

const Introduction = createSlice({
  name: 'intro',
  initialState,
  reducers:{
    update(state, actions){
      const key = actions.payload.name;
      const val = actions.payload.value;
      state.fullName = val; // 正常工作
      state = {...state, [key]: val} // 无效
      console.log(actions.payload.name , " " , actions.payload.value);
    },
  }
})

export const IntroductionActions = Introduction.actions;
export default Introduction;

Intro组件（触发更新） #

const Intro: React.FC<Props> = ({ moveForward }) => {
  const dispatch = useDispatch();
  const changeHandler = (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => {
    const {name , value} = event.target;
    dispatch(IntroductionActions.update({name, value}))
  }

  return (.... // 输入字段...)
}

Preview组件（获取更新后的值） #

import React from 'react'
import classes from './Preview.module.scss';
import { useSelector } from 'react-redux';
import { RootState } from '../../../store/store';

const Preview = () => {
  const introduction = useSelector((state:RootState) => state.intro);
  
  return (
    <div className={classes.previewContainer}>
      {introduction.fullName && <h1>Hi! My name is {introduction.fullName}</h1>}
    </div>
  )
}

export default Preview

问题核心 #

在slice的reducer中，直接给state变量重新赋值（state = {...state, [key]: val}）不会触发Redux状态更新，但直接修改state的属性（state.fullName = val）却可以。

原因分析 #

Redux Toolkit的createSlice底层使用Immer库，它允许你以"可变"的方式编写代码，内部会自动转换成符合Redux要求的不可变更新。但这里的关键是：你必须修改Immer传入的state代理对象的属性，而不是给state变量重新赋值。

当你执行state = {...state, [key]: val}时，你只是让state变量指向了一个新的普通对象，并没有修改Immer跟踪的代理对象，所以Immer不会生成新的状态，Redux store也就不会更新。

解决方案 #

方案1：直接修改state的动态属性（适用于顶层字段） #

利用Immer的特性，直接给state的动态字段赋值即可，Immer会自动处理成不可变更新：

update(state, actions) {
  const { name: key, value: val } = actions.payload;
  // 直接修改动态属性，Immer会捕获并生成新状态
  state[key] = val;
}

方案2：支持嵌套字段更新（可选） #

如果你的输入字段需要更新嵌套对象（比如portfolio.name或project.url），可以通过拆分路径的方式实现深层更新：

update(state, actions) {
  const { name: path, value: val } = actions.payload;
  const keys = path.split('.');
  let currentState = state;
  
  // 遍历到目标字段的父级对象
  for (let i = 0; i < keys.length - 1; i++) {
    currentState = currentState[keys[i]];
  }
  
  // 修改目标字段
  currentState[keys[keys.length - 1]] = val;
}

使用时，输入字段的name属性可以写成类似portfolio.name的形式。

内容的提问来源于stack exchange，提问作者Roni Jack Vituli