Getting warning message 'getDefaultMiddleware' is deprecated

Question

I am getting a getDefaultMiddleware is deprecated warning after updating "@reduxjs/toolkit": "^1.6.1" So how should I remove this warning. Do we have any other way to inject default middleware in the configureStore function?

import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import reducer from "./reducer";
import api from "./middleware/api";
export default function storeConfigure() {
   const store = configureStore({
   reducer,
   middleware: [
      ...getDefaultMiddleware(), 
      api
    ],
  });
  return store;
}

Any help is appreciated thanks!

Answer 1

The middleware option in configureStore accepts a callback function, and that callback will be given getDefaultMiddleware as its argument:

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
})

Use that instead of the separately imported version.

Answer 2

Can use like that:

const store = configureStore({
  reducer,
  middleware: (getDefaultMiddleware) => [...getDefaultMiddleware(), api],
})

A callback return an array of middle ware, it's will be cleaner and easy to read.