配置Redux Store时如何使用RTK Query的两个API reducer并解决middleware报错

问题原因 #

报错由两个常见错误共同导致：

• 多个RTK Query API实例未配置独立的reducerPath，且persist黑名单配置和实际注册的reducer key不匹配
• middleware拼接时传参格式不符合TypeScript类型要求

修复步骤 #

1. 先修正两个API实例的创建配置
   分别打开authRTK.ts和cartRTK.ts，在createApi配置中添加独立的reducerPath，避免默认值冲突：

// authRTK.ts 示例
export const AuthAPI = createApi({
  reducerPath: 'authApi', // 新增，和cartAPI的reducerPath区分开
  baseQuery: fetchBaseQuery({ baseUrl: '/api/auth' }),
  endpoints: (builder) => ({
    // 保留原有接口定义
  })
})

// cartRTK.ts 示例
export const cartAPI = createApi({
  reducerPath: 'cartApi', // 新增，和AuthAPI的reducerPath区分开
  baseQuery: fetchBaseQuery({ baseUrl: '/api/cart' }),
  endpoints: (builder) => ({
    // 保留原有接口定义
  })
})

2. 修正store.ts的配置

import { configureStore,combineReducers } from "@reduxjs/toolkit";
import cartReducer from "./cartRedux";
import userReducer from "./authRedux";
import { AuthAPI } from "./authRTK";
import { cartAPI } from "./cartRTK";
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";
import storage from 'redux-persist/lib/storage'


const persistConfig = {
  key: "root",
  // 修正黑名单为你设置的两个reducerPath值
  blacklist:['authApi','cartApi'],
  storage,
};
const rootReducer = combineReducers({
    [cartAPI.reducerPath]: cartAPI.reducer,
    [AuthAPI.reducerPath]: AuthAPI.reducer,
    auth:userReducer,
    cart:cartReducer,
})

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (gDM) =>
    gDM({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    // 修正concat传参：去掉数组包裹直接传入两个middleware，或通过展开运算符传入数组
    }).concat(AuthAPI.middleware,cartAPI.middleware), 
});

export let persistor = persistStore(store);

// 类型定义保持不变
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

原报错截图 #

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