CODEWITHSUNDEEP
reduxreact-reduxredux-toolkit
F_V
F_V

Reputation: 195

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

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.

enter image description here

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

Can anyone help here

Upvotes: 3

Views: 10170

Answers (3)

Ashok N
Ashok N

Reputation: 1

Incase if someone is facing issue with Redux Toolkit and Saga

// src/store/store.js
import { configureStore } from "@reduxjs/toolkit";
import createSagaMiddleware from "@redux-saga/core";
import rootReducer from "../reducers/index";
const sagaMiddleware = createSagaMiddleware();

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

export default store;

Upvotes: 0

Joseph Samuel
Joseph Samuel

Reputation: 19

i had the same issue, this is how i resolved it.

const persistedReducer = persistReducer(persistConfig, reducers);



const store = configureStore({reducer: persistedReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk),});

Upvotes: 0

markerikson
markerikson

Reputation: 67489

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.

Upvotes: 3

Related Questions