本文详解如何在使用 redux persist 的项目中正确集成 rtk query，解决因中间件配置冲突导致的非可序列化值警告问题，并提供安全、可维护的 store 初始化方案。
在将 RTK Query（通过 apiSlice）集成到已使用 redux-persist 的 Redux Toolkit 项目时，常见的错误并非源于 RTK Query 本身不兼容，而是由于 中间件配置方式变更后，Redux Toolkit 默认的序列化检查机制与 redux-persist 的内部行为发生冲突。
你原先手动传入 [thunk] 的写法跳过了 Redux Toolkit 内置的中间件增强（如 serializableCheck、immutableCheck、thunk 自动注入等），因此未触发警告；而切换为推荐的 getDefaultMiddleware() 方式后，这些严格检查被启用，恰好捕获了 redux-persist 在 PERSIST、REHYDRATE 等 action 中携带函数（如 register、rehydrate）的问题——这些函数属于非可序列化值，在 Redux DevTools 和时间旅行调试中无法安全处理。
✅ 正确解法是：保留 getDefaultMiddleware() 的完整能力，同时显式忽略 redux-persist 的特定 action 类型。
以下是修正后的完整 store 配置示例（关键修改已高亮）：
import { configureStore, combineReducers, getDefaultMiddleware } from '@reduxjs/toolkit';
import { persistReducer, persistStore, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { getPersistConfig } from 'redux-deep-persist';
import { apiSlice } from './api';
import { settingsReducer, userReducer } from './reducers'; // 假设路径
// 1. 将 apiSlice.reducer 加入 rootReducer
export const rootReducer = combineReducers({
settings: settingsReducer,
user: userReducer,
[apiSlice.reducerPath]: apiSlice.reducer, // ✅ 必须注册
});
// 2. 配置持久化（保持原有逻辑）
const config = getPersistConfig({
key: 'root',
storage,
whitelist: ['user.name', 'settings.color'],
rootReducer,
});
const persistedReducer = persistReducer(config, rootReducer);
// 3. 创建 store：关键 —— 配置 serializableCheck 忽略 persist 相关 action
export const store = configureStore({
reducer: persistedReducer,
devTools: process.env.NODE_ENV !== 'production',
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], // ✅ 核心修复
},
}).concat(apiSlice.middleware), // ✅ 自动包含 thunk、immer、logger 等，无需手动加 thunk
});
export const persistor = persistStore(store);
export type RootState = ReturnType;
export type AppDispatch = typeof store.dispatch; ⚠️ 注意事项：
- 不要再手动传入 [thunk] —— getDefaultMiddleware() 已默认包含 thunk，且会自动适配 RTK Query 所需的异步处理能力；
- ignoredActions 列表必须包含 redux-persist 所有核心 action 类型（FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER），缺一不可；
- 若你还使用了其他可能含非可序列化 payload 的库（如某些 WebSocket 中间件），也应将其 action type 加入 ignoredActions；
- 生产环境仍建议谨慎使用 serializableCheck: false 全局关闭 —— 它会削弱数据流的可预测性，仅推荐按 action 精准忽略。
总结：RTK Query 与 redux-persist 完全兼容，问题本质是中间件演进带来的校验强化。通过合理配置 serializableCheck.ignoredActions，即可在保障开发体验（DevTools、调试支持）的同时，安全启用 RTK Query 的强大能力。
