Question 180951 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – redux tookit when using a middleware builder function, an array of middleware must be returned

So I’m getting Uncaught Error: when using a middleware builder function, an array of middleware must be returned

This is my code

import { configureStore, compose, combineReducers, applyMiddleware } from "@reduxjs/toolkit";
import thunk from "redux-thunk";

const rootReducer = combineReducers({});

const middleware = applyMiddleware(thunk);
const composeWithDevTools = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const composedMiddleWare = composeWithDevTools(middleware)

const store = configureStore({
    reducer: rootReducer,
    middleware: composedMiddleWare,
    devTools: window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
})

export default store;

I have no idea what’s wrong and searching doesn’t seem to be returning any useful result

Tags:

2

Answers


  1. 0

    from this line

    const rootReducer = combineReducers({});

    the array is empty it cannot be empty us have to put in a slice. for example if you want to use a userSlice, the you have to add it there like this:

    import { configureStore, compose, combineReducers, applyMiddleware } from 
"@reduxjs/toolkit";
import thunk from "redux-thunk";
import {userSlice} from './userSlice.js'

const rootReducer = combineReducers({userSlice});

    notice i add a userSlice to the array

    Login or Signup to reply.
  2. 0

    The error you’re encountering is caused by the incorrect usage of the applyMiddleware function from Redux. In Redux Toolkit, the configureStore function already applies the middleware internally, so you don’t need to use applyMiddleware separately.

    Here’s the corrected code:

     import { configureStore } from "@reduxjs/toolkit";
 import thunk from "redux-thunk";

 const rootReducer = combineReducers({});

 const store = configureStore({
  reducer: rootReducer,
  middleware: [thunk],
  devTools: process.env.NODE_ENV !== 'production',
 });

 export default store;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search