How to use two API reducer with RTK query in configuration Store?

Question

I tried to combine two RTK reducers, but every time I tried to use concat to include it in the middleware, there will be errors, here's my code

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",
  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,
//   reducer: {
//     cart: cartReducer,
//     auth: persistedReducer,
//     [api.reducerPath]: api.reducer,
//   },
  middleware: (gDM) =>
    gDM({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }).concat([AuthAPI.middleware,cartAPI.middleware]), //getDefaultMiddleware
});

export let persistor = persistStore(store);

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;

// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

The reported error is like the below pic, I can't figure out what's the error really about.

Is something wrong with how I use multiple APIs? since there's no combine version in the official documents.

Khmer

Answer 1

I would assume that both cartAPI and AuthAPI have a reducerPath of query, leading to a conflict. You need to give them different reducerPaths.

That said, it is highly advised not to have more than one api in your whole application unless those query truly independent data with no overlap ever. (That would be the case if querying for google and twitter, since those are two independent companies, but not if querying Posts and Comments since these might be linked).

Melainemelamed

Ok , after reviewing the document , I have more understanding about reducer path, thanks – Khmer

@Melainemelamed Just noticed the comment here about "highly advised not to have more than one api in your whole application". As a backend we run Spring Boot with 15 RestControllers, one per entity, all with similar REST API:s. When building the front-end I suggested that we split up the Api into one chunk per RestController just to avoid a central file that could lead to merge issues (and other conflicts) when multiple people are changing it. What are the side effects of out design choice? (The configureStore becomes a bit messy). Should we merge the API:s according to you suggestion? – Approachable

@Approachable you won't have any way of using automatic refetching and stuff like that spanning multiple apis, and I highly doubt that your entities are 100% separated from each other. You can still use Code Splitting to have one api in multiple files. – Melainemelamed

Answer 2

 middleware: (gDM) =>
    gDM({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }).concat(cartAPI.middleware)
      .concat(AuthAPI.middleware)

Overturn

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community? – Haulage

Answer 3

POST Ref https://stackoverflow.com/a/71467046

You always only configure your one emptyApi in your store setup. All the other "apis" you get by calling injectEndpoints are just a reference to that same api - but with additional types for autocomplete.

Sure, just add multiple endpoints to the endpoints value of the injectEndpoints call.

RTK Official Ref https://redux-toolkit.js.org/rtk-query/usage/code-splitting

Mittiemittimus