Redux Toolkit中修改useSelector返回的只读对象报错，寻求全局解决方案

嗨，这个问题我之前也踩过坑！本质原因是Redux Toolkit（RTK）内部用Immer实现了不可变状态管理，从useSelector拿到的state对象是Immer生成的只读代理对象——这是RTK为了强制大家遵守不可变更新规则做的保护机制，直接修改它肯定会抛出「只读属性无法赋值」的错误。

不想每个地方都手动用Object.assign或者展开运算符拷贝对象的话，给你几个全局化的解决方案，按推荐程度排序：

1. 封装自定义Hook，统一处理可变更新（最推荐） #

我们可以基于Immer的produce方法封装一个自定义Hook，把「创建可修改副本+dispatch更新」的逻辑统一起来，这样原有代码只需要做很小的改动：

import { produce } from '@reduxjs/toolkit';
import { useSelector, useDispatch } from 'react-redux';
// 导入你的setFormData action
import { setFormData } from './your-slice-file';

export const useMutableFormData = () => {
  // 拿到原始只读数据
  const data = useSelector(state => state.formData.data);
  const dispatch = useDispatch();

  // 封装一个更新函数，接受修改逻辑的回调
  const updateData = (updater) => {
    // 用produce生成新的状态副本
    const newData = produce(data, updater);
    // dispatch更新Redux状态
    dispatch(setFormData(newData));
  };

  return [data, updateData];
};

然后在组件里替换原来的useSelector调用：

// 原来的const data = useSelector(...)
const [data, updateData] = useMutableFormData();

// 原来直接修改data的代码，改成传给updateData的回调
updateData(draft => {
  draft.sectionGroupOrder = newOrder;
  draft.sectionGroups[group.name] = group;
  draft.sectionGroups['My Component'].component = MyComponent;
});

这种方式完全符合RTK的设计原则，不需要手动拷贝对象，而且只需要把原有修改逻辑包进回调里就行，改动量极小，还能保证状态更新的可追踪性。

2. 不推荐：在Selector中返回深拷贝的对象 #

如果你真的想保留直接修改的写法（非常不建议，会违反Redux不可变原则），可以在useSelector里直接返回一个深拷贝的对象：

const data = useSelector(state => JSON.parse(JSON.stringify(state.formData.data)));

但这个方法有很多致命问题：

• 性能极差，每次组件渲染都会深拷贝整个对象
• 无法处理函数、Symbol、循环引用等特殊类型
• 修改后必须手动dispatch更新Redux状态，否则组件下次拿到的还是旧数据，状态会不一致

所以除非万不得已，千万别用这种方式。

3. 终极方案：统一在Reducer中处理更新 #

其实RTK的设计初衷就是让所有状态更新都在Reducer里完成，你可以在Slice里添加一个通用的更新action，比如接受一个修改函数：

// 在你的formData slice里
import { createSlice, produce } from '@reduxjs/toolkit';

const formDataSlice = createSlice({
  name: 'formData',
  initialState: { data: {} },
  reducers: {
    setFormData: (state, { payload }) => {
      state.data = payload;
    },
    // 添加一个通用更新action
    updateFormData: (state, { payload: updater }) => {
      produce(state.data, updater);
    }
  }
});

export const { setFormData, updateFormData } = formDataSlice.actions;

然后组件里dispatch这个action就行：

const dispatch = useDispatch();
const data = useSelector(state => state.formData.data);

dispatch(updateFormData(draft => {
  draft.sectionGroupOrder = newOrder;
  draft.sectionGroups[group.name] = group;
  draft.sectionGroups['My Component'].component = MyComponent;
}));

这种方式把更新逻辑完全收拢到Reducer里，更符合Redux的单向数据流理念，但需要你在Slice里加一个通用action，也是一种全局化的解决方案。

备注：内容来源于stack exchange，提问作者copenndthagen