React组件存入Redux Toolkit遇非可序列化值错误，求解决方案

核心问题：不要把React组件实例存进Redux Store #

你遇到的错误根源是React组件实例本身是非可序列化对象，不管你存在数组还是对象里，Redux Toolkit默认的序列化检查都会触发错误——因为Redux的设计原则是Store只存可序列化的状态数据（比如字符串、数字、普通对象/数组），而不是组件、函数这类复杂实例。

正确解决方案：只存组件所需数据，渲染时再生成组件 #

1. 修正Redux Store的状态结构

把Store里的内容改成产品数据，而非组件实例：

// 定义产品数据类型，可根据实际需求扩展属性
type ProductItem = {
  productName: string;
  // 可选：添加价格、数量等其他产品属性
};

type InitialState = {
  isOpen: boolean;
  shoppingCartItems: { [key: string]: ProductItem };
};

const initialState: InitialState = {
  isOpen: false,
  shoppingCartItems: {},
};

export const drawer = createSlice({
  name: "drawer",
  initialState,
  reducers: {
    addToCart: (state, action: { payload: ProductItem }) => {
      state.shoppingCartItems[action.payload.productName] = action.payload;
    },
  },
});

export const { addToCart } = drawer.actions;

2. 修改添加购物车的逻辑

点击按钮时只传递产品数据，不是组件：

<Button onClick={() => addToShoppingCart({ productName })}>Add</Button>

// 对应的dispatch函数
function addToShoppingCart(item: ProductItem) {
  dispatch(addToCart(item));
}

3. 渲染购物车组件时动态生成

从Store取出产品数据后，再渲染对应的Product组件：

// 从Redux Store获取购物车数据
const shoppingCartItems = useSelector((state: RootState) => state.drawer.shoppingCartItems);

// 渲染购物车内容
return (
  <div className="cart-container">
    {Object.values(shoppingCartItems).map((item) => (
      <Product key={item.productName} productName={item.productName} />
    ))}
  </div>
);

不推荐的临时方案：关闭序列化检查 #

如果你坚持要存储组件实例（会导致状态无法持久化、调试困难等问题），可以关闭Redux Toolkit的序列化检查：

import { configureStore } from "@reduxjs/toolkit";
import { drawer } from "./drawerSlice";

export const store = configureStore({
  reducer: {
    drawer: drawer.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false, // 关闭序列化检查
    }),
});

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