Redux Toolkit+Redux-Persist：关闭serializableCheck并保留多标签页状态同步

问题根源在于你只关闭了Redux Toolkit自带的serializableCheck，但createStateSyncMiddleware本身默认也会做序列化验证——这就是警告依然存在的核心原因。要彻底消除警告且保留多标签同步功能，需要同时关闭这两处的序列化检查。

具体配置步骤 #

1. 关闭Redux Toolkit的序列化检查：在configureStore中调用getDefaultMiddleware时，将serializableCheck设为false；如果用到不可变数据结构，也可以一并关闭immutableCheck。
2. 关闭状态同步中间件的序列化检查：创建createStateSyncMiddleware时，添加serialize: false配置，禁用它自带的序列化验证逻辑。
3. 正确合并中间件：把配置好的同步中间件加入到中间件列表中。

完整代码示例 #

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { createStateSyncMiddleware, initMessageListener } from 'redux-state-sync';
import { persistStore, persistReducer, createTransform } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

// 示例：处理非序列化数据（如Date对象）的转换工具
// 若你的非序列化数据无需持久化，可省略此部分
const dateTransform = createTransform(
  // 存储时将Date转为ISO字符串
  (inboundState) => ({
    ...inboundState,
    createdAt: inboundState.createdAt?.toISOString()
  }),
  // 读取时将字符串转回Date对象
  (outboundState) => ({
    ...outboundState,
    createdAt: outboundState.createdAt ? new Date(outboundState.createdAt) : null
  }),
  // 指定仅作用于目标slice
  { whitelist: ['yourTargetSlice'] }
);

// Redux-Persist配置
const persistConfig = {
  key: 'root',
  storage,
  // 加入转换规则处理非序列化数据
  transforms: [dateTransform],
  // 可选：无需持久化的slice加入黑名单
  // blacklist: ['tempSlice']
};

// 根reducer
const rootReducer = {
  // 填入你的各个slice reducer
  // yourTargetSlice: yourTargetReducer,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

// 创建状态同步中间件，关闭序列化检查
const stateSyncMiddleware = createStateSyncMiddleware({
  serialize: false, // 关键：禁用同步中间件的序列化验证
  // 可选：指定需要同步的action类型（白名单/黑名单二选一）
  whitelist: ['yourTargetSlice/someAction', 'anotherSlice/anotherAction']
});

// 配置Store
export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false, // 关闭RTK自带的序列化检查
      immutableCheck: false // 可选：若使用不可变数据，关闭此检查
    }).concat(stateSyncMiddleware), // 合并同步中间件
});

// 初始化多标签页同步的消息监听器
initMessageListener(store);

export const persistor = persistStore(store);

额外注意事项 #

• 关闭序列化检查后，需自行处理非序列化数据的持久化：Redux-Persist仅支持存储可序列化数据（对象、数组、字符串、数字等），若状态中包含Date、Map、Set这类非序列化类型，必须通过transform转换后再存储，否则会触发persist报错。
• 若某些非序列化数据无需持久化，可将对应slice加入persist配置的blacklist，省去转换的麻烦。

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