Configuring the store with RTK-Query middleware

Question

I'm trying to add the RTK-Query middleware to a nested store structure, I'm getting a very long and non-descriptive typescript error when I add the api middleware...

Here's my code:

export const rootReducer = combineReducers({
  foo: fooReducer,
  nested: combineReducers({
    bar: barReducer,
    [myFooApi.reducerPath]: myFooApi.reducer,  
  })
});

const store = configureStore({
  reducer: rootReducer,
  
  middleware: (getDefaultMiddleware) =>   // Getting TS2322 error: type is not assignable to type...
    getDefaultMiddleware().concat(tokenListsApi.middleware)

});

The error disappears when I move [fooApi.reducerPath] to the root of the reducer like so:

export const rootReducer = combineReducers({
  foo: fooReducer,
  bar: barReducer,
  [fooApi.reducerPath]: fooApi.reducer,  
});

I was looking for examples of a nested usage of the RTK-Query Api reducer but couldn't find any... what am I missing?

score 9 · Accepted Answer · answered Oct 05 '21 at 16:07

This was answered over in an issue, but for posterity:

RTK Query requires that all API slice reducers be set up as top-level slices of the root state, with no nesting. RTKQ enforces this via both TS types and runtime checks. So, the fix here was to move the [fooApi.reducerPath]: fooApi.reducer up to the root of the state tree.

Configuring the store with RTK-Query middleware

1 Answers1