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

Issue

With this code, I get no errors.

import {combineReducers, configureStore} from '@reduxjs/toolkit';
import {menuReducer as menu} from './menu';
import {cartReducer as cart} from './shoppingCart';
import {optionsReducer as options} from './optionsItem';
import {homeReducer as home} from './home';
import {rewardReducer as reward} from './reward';
import {ordersReducer as orders} from './orders';
import {authReducer as auth} from './auth';
import giftCardReducer from '../store/giftCard';
import paymentMethodReducer from './paymentMethod';
import paymentToken from "./paymentToken";
import qRCode from "./qRCode";
import orderHistory from './orderHistory';
import orderDetail from './orderDetail';
import showCompletedOrder from './showCompletedOrder';
import paymentOptionsSummary from './paymentOptionsSummary';
import usersUpdate from './usersUpdate';
import referAFriend from './referAFriend';
import resetPassword from './resetPassword';

const reducer = combineReducers({
  menu,
  auth,
  giftCardReducer,
  paymentMethodReducer,
  cart,
  options,
  orders,
  home,
  reward,
  paymentToken,
  qRCode,
  orderHistory,
  orderDetail,
  showCompletedOrder,
  paymentOptionsSummary,
  usersUpdate,
  referAFriend,
  resetPassword
});
export {menuActions} from './menu';
export {cartActions} from './shoppingCart';
export {optionsActions} from './optionsItem';
export {ordersActions} from './orders';
export {authActions} from './auth';
export {homeActions} from './home';
export {rewardActions} from './reward';

export type rootState = ReturnType<typeof reducer>;

export default configureStore({
  reducer:reducer
});


const rootReducer = (state, action) => {
  if (action.type === 'auth/logout') { // check for action type 
    state = undefined;
  }
  return reducer(state, action);
};

If I change this to the code below, I get the error mentioned.

import {combineReducers, configureStore} from '@reduxjs/toolkit';
import {menuReducer as menu} from './menu';
import {cartReducer as cart} from './shoppingCart';
import {optionsReducer as options} from './optionsItem';
import {homeReducer as home} from './home';
import {rewardReducer as reward} from './reward';
import {ordersReducer as orders} from './orders';
import {authReducer as auth} from './auth';
import giftCardReducer from '../store/giftCard';
import paymentMethodReducer from './paymentMethod';
import paymentToken from "./paymentToken";
import qRCode from "./qRCode";
import orderHistory from './orderHistory';
import orderDetail from './orderDetail';
import showCompletedOrder from './showCompletedOrder';
import paymentOptionsSummary from './paymentOptionsSummary';
import usersUpdate from './usersUpdate';
import referAFriend from './referAFriend';
import resetPassword from './resetPassword';

const reducer = combineReducers({
  menu,
  auth,
  giftCardReducer,
  paymentMethodReducer,
  cart,
  options,
  orders,
  home,
  reward,
  paymentToken,
  qRCode,
  orderHistory,
  orderDetail,
  showCompletedOrder,
  paymentOptionsSummary,
  usersUpdate,
  referAFriend,
  resetPassword
});
export {menuActions} from './menu';
export {cartActions} from './shoppingCart';
export {optionsActions} from './optionsItem';
export {ordersActions} from './orders';
export {authActions} from './auth';
export {homeActions} from './home';
export {rewardActions} from './reward';

export type rootState = ReturnType<typeof reducer>;

export default configureStore({
  reducer:rootReducer
});


const rootReducer = (state, action) => {
  if (action.type === 'auth/logout') { // check for action type 
    state = undefined;
  }
  return reducer(state, action);
};

Solution

Actually I got the solution.

This error is shows because i have put the rootReducer function below the configure store that's why reducer id not getting the rootReducer function.

So, when I move it up then its working fine.

Answered By - Satyam Tripathi