如何同时配置Redux Persistor与RTK Query的Store？

要同时启用Redux Persist持久化和RTK Query，核心是避免持久化RTK Query的缓存状态，并正确配置Store的reducer与middleware。以下是标准配置流程及代码示例：

关键配置要点 #

• RTK Query的缓存状态（对应其reducerPath，默认值为api）无需持久化，必须在persist配置中排除
• 需在Redux默认middleware中忽略redux-persist的特定action类型，避免序列化冲突
• 正确合并持久化reducer与RTK Query的reducer，并添加RTK Query专属middleware

完整Store配置示例（index.js） #

import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 默认使用localStorage
import { api } from './path/to/your/rtk-query-api'; // 导入你的RTK Query api实例
import authReducer from './path/to/authReducer';

// 1. 配置persist规则，排除RTK Query的slice
const persistConfig = {
  key: 'root',
  storage,
  blacklist: [api.reducerPath], // 此处对应你createApi时设置的reducerPath，默认是'api'
};

// 2. 包裹需要持久化的reducer（比如authReducer）
const persistedReducer = persistReducer(persistConfig, authReducer);

// 3. 配置Store
export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer, // 注册RTK Query的reducer
    auth: persistedReducer, // 注册持久化的auth reducer
  },
  // 4. 配置middleware：忽略persist的action类型，同时添加RTK Query的middleware
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['persist/FLUSH', 'persist/REHYDRATE', 'persist/PAUSE', 'persist/PERSIST', 'persist/PURGE', 'persist/REGISTER'],
      },
    }).concat(api.middleware),
});

// 5. 创建persistor实例
export const persistor = persistStore(store);

常见错误排查 #

1. 未排除RTK Query的slice：若将RTK Query的reducer纳入持久化范围，会导致缓存状态被错误持久化，引发状态不一致或运行报错
2. middleware配置缺失：必须确保RTK Query的api.middleware被添加到middleware数组，否则请求逻辑无法正常执行
3. 未忽略persist的action类型：这会触发Redux序列化警告，影响应用稳定性

应用层使用示例 #

在根组件中用PersistGate包裹应用，传入store和persistor：

import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

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