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!

Sememe

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.

Mealymouthed

What if I want to concat multiple custom middleware? when I am adding multiple custom middlewares app stopped working. – Sememe

You should be able to pass multiple middleware to a single concat call as far as I know. If for some reason that doesn't work, do several concat calls in a row. – Mealymouthed

Does logger need to be imported? If so, from where? Is it even necessary? – Loni

That's just an example of adding a middleware, such as github.com/LogRocket/redux-logger . Replace logger with whatever middleware you actually want to add. – Mealymouthed

For anyone arriving from google curious about why it's getting deprecated, these 2 RTK Github issue threads are a great read: github.com/reduxjs/redux-toolkit/issues/… & github.com/reduxjs/redux-toolkit/issues/1324 – Badmouth

@Mealymouthed can i confirm that for multiple middlewares, it should look like this, getDefaultMiddleware().concat(thunk).concat(track).concat(logger)? – Prine

@CompaqLE2202x : You should be able to pass multiple middleware to a single concat() call, like .concat(track, logger) - getDefaultMiddleware() returns an array, albeit one with improved TS types and a .prepend() method. Note that thunk is already part of getDefaultMiddleware() and you don't need to add that manually. – Mealymouthed

Based on this answer, how to disable the logger on production? Do I have to write a condition like: ``` middleware: (getDefaultMiddleware) => { if (process.env.NODE_ENV !== 'production') { return getDefaultMiddleware().concat(logger) } return getDefaultMiddleware(); }, ``` – Ruvalcaba

Yeah, any sort of conditional check like that would work. – Mealymouthed

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.

Galway

The redux toolkit docs says that it is good practice to use the concat array method instead of array destructuring in this particular scenario... just letting you know ✌️ – Swordfish

For clarity, the paragraph @georgewashingmachine is referring to reads: "It is preferable to use the chainable .concat(...) and .prepend(...) methods of the returned MiddlewareArray instead of the array spread operator, as the latter can lose valuable type information under some circumstances." at redux-toolkit.js.org/api/getDefaultMiddleware – Curia

Answer 3

getDefaultMiddleware is deprecated, you might need to add them as an array like this.

const store = configureStore({
  reducer: rootReducer,
  middleware: [thunk, logger],
})

Note: You will be responsible to add all the middlewares you'll need as getDefaultMiddleware() comes with several other middlewares(Most of them are for development purpose except createAsyncThunk).

If you need to add them, you can do like this;

const store = configureStore({
  reducer: rootReducer,
  middleware: [
    createActionCreatorInvariantMiddleware,
    createImmutableStateInvariantMiddleware,
    createAsyncThunk,
    createSerializableStateInvariantMiddleware,
  ]});

Remember to import them above in your code.

Cymbal