createAsyncThunk的onSubmit传递字符串时出现不可序列化值报错如何解决？

问题根因 #

• 你使用的Redux Toolkit默认开启序列化状态检测，要求所有action、state中的值均为可序列化的纯数据，你将异步请求函数直接放到action的payload中，触发了校验报错。
• 你的store中间件配置错误：configureStore的middleware参数如果直接传入数组，会覆盖RTK内置的默认中间件集合，你仅传入未调用的thunk变量，导致thunk中间件未实际生效。

修复方案 #

1. 拆分异步逻辑与action payload #

不要将异步函数放到action的payload中，单独定义thunk处理异步请求，仅将接口返回的纯数据传入payload：

// 定义异步thunk函数
export const fetchCountriesByRegion = (requestUrl) => async (dispatch) => {
  const response = await fetch(requestUrl);
  const countriesData = await response.json();
  // 仅将纯数据放入payload分发action
  dispatch({
    type: "countries/updateList",
    payload: countriesData
  });
};

// 组件内调用方式
const handleRegionChange = (regionUrl) => {
  dispatch(fetchCountriesByRegion(regionUrl));
};

2. 修复store中间件配置 #

使用configureStore的中间件回调写法，保留默认中间件的基础上追加thunk，如无特殊需求不需要关闭序列化检测：

// src/redux/store.js
import { configureStore } from "@reduxjs/toolkit";
import thunk from "redux-thunk";
import countriesReducer from "./countriesSlice";

export default configureStore({
  reducer: {
    countries: countriesReducer
  },
  // 正确的中间件配置写法
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk)
});

如果你的业务场景确实需要存储不可序列化值，可添加配置关闭序列化检测：

middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware({
    serializableCheck: false
  }).concat(thunk)

3. 额外规范 #

所有异步请求、副作用逻辑都放到thunk中处理，不要在reducer、action payload中出现函数、Promise、类实例等不可序列化值，即可避免此类报错。

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