Redux RTK Query: getDefaultMiddleware is not a function

Question

Where is getDefaultMiddleware coming from? I'm reading the docs and it seems to magically appear within configure store. While that's great and all, it didn't find its way into my store, and well ... since there's no import path for this function and I have no idea how to approach this problem, I could use some guidance.

rtk version: "@reduxjs/toolkit": "^1.6.1",

tldr;

getDefaultMiddleware() doesn't exist in my store + I haven't found anything useful in the docs yet regarding it.

here is the error I get:

here is my store.ts

import { Action, configureStore, ThunkAction } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { myApi } from './services/api';

import authorReducer from './slices/authorSlice';
import transcriptReducer from './slices/transcriptSlice';

export const store = configureStore({
  reducer: {
    [myApi.reducerPath]: myApi.reducer,
    middleware: (getDefaultMiddleware) =>
      // "This expression is not callable."
      getDefaultMiddleware().concat(myApi.middleware),
    author: authorReducer,
    transcript: transcriptReducer,
  },
});

setupListeners(store.dispatch);

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;

here is my api.ts

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const apiEndpoint ='http://localhost:5000';

export const myApi = createApi({
  reducerPath: 'myApi',
  baseQuery: fetchBaseQuery({ baseUrl: apiEndpoint }),
  endpoints: builder => ({
    getFileById: builder.query<any, { id: string; fileId: string }>({
      query: arg => {
        const { id, fileId } = arg;
        return `/some/endpoint/with/two/${id}/pathvariables/${fileId}`;
      },
    }),
  }),
});

// RTK Query will automatically generate hooks for each endpoint query
export const { useGetFileByIdQuery } = myApi;

Maramarabel

Not sure if this helps: https://mcmap.net/q/413628/-getting-warning-message-39-getdefaultmiddleware-39-is-deprecated – Christen

Thank you. I'm searching docs to see if I can backdoor it and use the older depreciated approach until someone comes in here with a better suggestion. – Maramarabel

@Christen figured it out. Adding answer below in a moment. – Maramarabel

Answer 1

Answer:

I had my middleware defined inside of the reducer: { ... }. I needed to move it outside of that reducer object. Problem solved.

export const store = configureStore({
  reducer: {
    [myApi.reducerPath]: myApi.reducer,
    author: authorReducer,
    transcript: transcriptReducer,
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware().concat(myApi.middleware),
});

Maramarabel

Oh. had made the same mistake. Works fine now – Natant

oh dear, how pathetic I was when typing code 🤦🏻‍♂️ – Marko

Answer 2

Dont forget to call getDefaultMiddleware like this getDefaultMiddleware() then say .concat(myApi.middleware) or you will get same error.

export const store = configureStore({
  reducer: {
    [myApi.reducerPath]: myApi.reducer,
    author: authorReducer,
    transcript: transcriptReducer,
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware().concat(myApi.middleware),
});



   

Gutter

Answer 3

Mine worked this way as I was using Redux persist:

const rootReducer = combineReducers({

  user:userSlice,
  fetchUsers:fetchUserSlice,
  [MyPostApi.reducerPath]:MyPostApi.reducer,
  
})

  const persistConfig = {

    key:'zomatostore',
    version:1,
    storage,
    
  }
  
  const persistedReducer = persistReducer(persistConfig, rootReducer)
  
export const store = configureStore({
  
  reducer:persistedReducer,
  middleware:getDefaultMiddleware => getDefaultMiddleware().concat(MyPostApi.middleware)

 
});

Trident