Error - [Redux-Toolkit] - each middleware provided to configureStore must be a function

Question

I was trying to setup redux in my existing React project using redux toolkit by following the official documentation.

I tried configuring the middleware

import { configureStore, MiddlewareArray } from '@reduxjs/toolkit'

configureStore({
  reducer: rootReducer,
  middleware: new MiddlewareArray().concat(logger),
})

configureStore({
  reducer: rootReducer,
  middleware: [logger] as const,
})

However, I get the below error.

I tried https://stackoverflow.com/a/68486869, it didn't help

Can anyone help here

Answer 1

Hmm. Both those examples look like they should run, in theory. But neither of them is what we show or recommend in the docs.

The "right" answer should be:

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

You should never have to call new MiddlewareArray() yourself. That's a type that gets returned from getDefaultMiddleware() already. You also don't normally want to do [someMiddleware], because that means that none of the default middleware will get included.