Redux Persist与RTK Query配置时中间件合并类型不匹配求助

问题分析 #

你的代码中，persistReducer包装后的根reducer会给状态添加PersistPartial类型，而RTK Query的reducer状态类型未与该类型正确合并，同时RootState的类型推导未覆盖所有reducer状态，最终引发类型不匹配错误。

修复步骤 #

1. 修正RootState类型定义 #

原代码直接用ReturnType<typeof store.getState>定义RootState，无法正确兼容persistReducer带来的类型变化。需明确合并原始根状态与PersistPartial类型：

// 先定义未持久化的根状态类型
type RootReducerState = ReturnType<typeof rootReducer>;
// 合并PersistPartial类型，覆盖所有状态字段
export type RootState = RootReducerState & PersistPartial;

替换原有的export type RootState = ReturnType<typeof store.getState>;即可解决状态类型识别问题。

2. 优化Middleware合并与序列化检查配置 #

完全关闭serializableCheck可能隐藏其他序列化问题，推荐仅排除redux-persist的action类型，同时调整middleware合并写法以确保类型兼容：

middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
    },
  }).concat(categoryApi.middleware, authApi.middleware),

3. 移除重复的setupListeners调用 #

代码中重复执行了setupListeners(store.dispatch);，删除其中一个即可避免不必要的重复操作。

完整修复后的store.ts代码 #

import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
import {
  FLUSH,
  PAUSE,
  PERSIST,
  persistReducer,
  persistStore,
  PURGE,
  REGISTER,
  REHYDRATE
} from 'redux-persist';
import { combineReducers } from 'redux';
import { configureStore } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { authApi } from './services/authApi';
import adminReducer from './slices/adminSlice';
import { categoryApi } from './services/categoryApi';
import { PersistPartial } from 'redux-persist/es/persistReducer';

// Create a persist config
const persistConfig = {
  key: 'root',
  storage, // Use localStorage as the default storage
  whitelist: ['admin'] // Add slices that you want to persist (e.g., 'admin')
};

// Combine reducers
const rootReducer = combineReducers({
  [authApi.reducerPath]: authApi.reducer,
  [categoryApi.reducerPath]: categoryApi.reducer,
  admin: adminReducer
});

// Persist the root reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);
export const store = configureStore({
  reducer: persistedReducer,

  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }).concat(categoryApi.middleware, authApi.middleware),

  devTools: true
});

// Optional, but recommended to enable refetching on focus/refocus
setupListeners(store.dispatch);

export const persistor = persistStore(store);

// Types for store
type RootReducerState = ReturnType<typeof rootReducer>;
export type RootState = RootReducerState & PersistPartial;
export type AppDispatch = typeof store.dispatch;

修复原理 #

• 明确的RootState类型合并了原始根状态与PersistPartial，让TypeScript能正确识别所有状态字段（包括RTK Query的reducer状态）。
• 精准的序列化检查配置既避免redux-persist的action触发错误，又保留了对其他action的序列化检查，兼顾兼容性与安全性。
• 规范的middleware合并写法确保RTK Query中间件与默认中间件类型兼容，消除类型冲突。

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