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

Question

1

I am following the Redux tutorials on the Redux site and I am having difficulty using combine reducers. If I run my code without combine reducers, it works fine. As soon as I put the single reducer into the combined reducers function. I get this: Error: "reducer" is a required argument, and must be a function or an object of functions that can be passed to combineReducers. What am I doing wrong?

Here is the store before using combine reducer

import {configureStore , combineReducers} from "@reduxjs/toolkit"
 import { applyMiddleware } from "redux";
 import thunk from "redux-thunk";
 import { composeWithDevTools } from "redux-devtools-extension";
import { productReducer } from "./reducers/productReducer";

const rootReducer = combineReducers({
  products:productReducer
});

 let initialState = {};

 const middleware = [thunk];

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

 export default store;

Answer 1

As a first observation: you don't need to manually add the thunk middleware, call composeWithDevTools, or call applyMiddleware - the configureStore API already does all of those for you!

More specifically in this case: we normally call the top-level reducer function the "root reducer" to categorize it.

However: configureStore expects that you pass that as a field named reducer, and instead you're passing a field named rootReducer. So, it's correctly pointing out that there is no reducer argument being provided.

Change it to reducer: rootReducer and it will work.

For that matter, it's preloadedState, and not initialState.

However, configureStore will also automatically call combineReducers for you, and you don't need to provide an empty object. So this whole thing could really be as short as:

import {configureStore , combineReducers} from "@reduxjs/toolkit"
import { productReducer } from "./reducers/productReducer";

const store = configureStore({
   reducer: {
    products: productReducer
   },
});

 export default store;