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;

Not sure if this helps: https://stackoverflow.com/a/68486869/5385381 — ksav, Sep 08 '21 at 00:40
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. — kevin, Sep 08 '21 at 00:44

score 23 · Accepted Answer · answered Sep 08 '21 at 00:51

23

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),
});

answered Sep 08 '21 at 00:51

kevin

2,707
4
26
58

Oh. had made the same mistake. Works fine now – Peter Mugendi May 15 '23 at 10:55

Anand Oganiya · Answer 2 · 2022-07-04T15:59:07.930

0

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),
});

edited Jul 04 '22 at 15:59

answered Jul 04 '22 at 15:58

Anand Oganiya

1
1

Redux RTK Query: getDefaultMiddleware is not a function

here is the error I get:

here is my store.ts

here is my api.ts

2 Answers2

Answer:

here is my `store.ts`

here is my `api.ts`