Uncaught Error: "reducer" is a required argument, and must be a function or an object of functions that can be passed to

Question

I have done hours of debugging and I am unable to find the solution.

import { combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { configureStore } from '@redux.js/toolkit';
import { composeWithDevTools } from 'redux-devtools-extension';

let reducer = combineReducers({
  // contains all reducers
});

// here all our data will lie
const initialState = {};

const middleware = [thunk];

const store = configureStore(
  reducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

Error:

I just want a todo list to be displayed on browser, which I have written in my App.js.

Answer 1

The configureStore utility takes a single argument object with properties reducer, middleware, devTools, preloadedState, and enhancers.

import { configureStore } from '@reduxjs/toolkit';
import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  // contains all reducer functions
});

const initialState = {};

const store = configureStore({ // <-- single object argument
  reducer: rootReducer,
  preloadedState: initialState,
});

export default store;

Note that I didn't include the Thunk middleware since Redux Toolkit comes with the Thunk middleware by default, and I didn't include any regarding devTool since these are also enabled by default.

Answer 2

Try:

const store=configureStore(
    {
        reducer,
        initialState,
        composeWithDevTools( ... )
    }
)

export default store;

Help for posting code in Stack Overflow:

1. How do I format my posts using Markdown or HTML?
2. Markdown help