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!

score 73 · Accepted Answer · answered Jul 22 '21 at 14:42

73

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.

answered Jul 22 '21 at 14:42

markerikson

63,178
10
141
157

2

What if I want to `concat` multiple custom middleware? when I am adding multiple custom middlewares app stopped working. – TheParam Jul 23 '21 at 05:39
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. – markerikson Jul 23 '21 at 20:56
Does `logger` need to be imported? If so, from where? Is it even necessary? – Aidan Hakimian Jul 27 '21 at 19:59
1

That's just an example of adding _a_ middleware, such as https://github.com/LogRocket/redux-logger . Replace `logger` with whatever middleware you actually want to add. – markerikson Jul 27 '21 at 20:45
3

For anyone arriving from google curious about why it's getting deprecated, these 2 RTK Github issue threads are a great read: https://github.com/reduxjs/redux-toolkit/issues/958#issuecomment-875538589 & https://github.com/reduxjs/redux-toolkit/issues/1324 – sgarcia.dev Oct 07 '21 at 17:02
@markerikson can i confirm that for multiple middlewares, it should look like this, `getDefaultMiddleware().concat(thunk).concat(track).concat(logger)`? – Compaq LE2202x Oct 22 '22 at 17:46
1

@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. – markerikson Oct 23 '22 at 01:40
1

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(); }, ``` – Wayne Mao Oct 24 '22 at 07:01
Yeah, any sort of conditional check like that would work. – markerikson Oct 26 '22 at 14:10

score 12 · Answer 2 · answered Sep 16 '21 at 14:40

12

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.

answered Sep 16 '21 at 14:40

James Tran

129
4

7

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 ✌️ – chai Nov 09 '21 at 10:53
4

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 https://redux-toolkit.js.org/api/getDefaultMiddleware – Michael Fulton Jan 01 '22 at 16:24

Getting warning message 'getDefaultMiddleware' is deprecated

2 Answers2

Linked

Related