Redux检测到不可序列化值报错 表单提交状态到Store再调接口是否正确

关于表单状态处理的合理性 #

• 你描述的「表单输入值存储在组件本地state，提交时才同步到Redux store并发起接口请求」的做法是完全合理且属于行业推荐最佳实践。
  • 表单输入过程中的状态属于临时局部状态，不需要全局感知，频繁提交到Redux反而会产生大量无意义的action，增加全局状态更新的冗余开销。
  • 仅在提交确认后将最终有效数据同步到全局store，既符合状态分层的设计原则，也能降低不必要的性能损耗。

关于非序列化值报错的问题 #

你收到的"A non-serializable value was detected in the state"报错核心原因是Redux的默认设计约束：Redux要求store中存储的所有值都必须是可序列化的（普通对象、数组、字符串、数字、布尔值、null等原生JS类型），禁止存储类实例、函数、Symbol等非序列化类型。

你的写法存在的问题 #

你的写法并不是完全错误，但不符合Redux的官方规范，会直接导致以下问题：

• Redux DevTools的时间旅行、状态快照等调试能力失效
• 状态持久化（比如redux-persist）无法正常工作
• 状态变更的可预测性下降，不符合Redux单向数据流的设计理念
  你代码中的问题根源是initialState里直接存储了new DataXYZ()生成的类实例，类实例属于典型的非序列化值，触发了Redux的默认校验规则。

修复方案 #

调整状态存储的结构，只把需要的纯数据字段存在store中，在需要用到DataXYZ实例的场景（比如组件取值、selector计算时），再用store中的数据初始化实例即可：

// 修改后的initialState，只存纯数据
export const initialState = {
    dataA: "",
    dataB: 0,
    dataC: {}, // 存储DataXYZ对应的纯属性对象
    dataD: {} // 存储DataXYZ对应的纯属性对象
}

// 需要使用DataXYZ实例的地方，比如组件中
import { useSelector } from 'react-redux'
const DemoComponent = () => {
  const { dataC, dataD } = useSelector(state => state.test)
  // 运行时生成实例，不存入store
  const dataCInstance = new DataXYZ(dataC)
  const dataDInstance = new DataXYZ(dataD)
  // 后续逻辑使用生成的实例即可
}

另外你在extraReducers中直接修改state.dataD.description的写法是没问题的，Redux Toolkit的createSlice内部集成了Immer，支持直接修改状态草稿的写法。

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