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

user_13424390 0
Viewed 6101

With this code i got no error.

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 code with below one i got 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);
};

Please help me.Thanks in advance. //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

react-redux redux-toolkit react-native
4 Answers

I also had this problem in React when I configured my redux store inside my client index.js file. This was my code that produces the error:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { configureStore } from "@reduxjs/toolkit";
import { Provider } from "react-redux";
import allReducers from "./redux/reducer";

const store = configureStore({ allReducers });

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
);

QUICK FIX: As the error suggests, "reducer" is a required argument... So, I just modified my store constant like so: configureStore({reducer: allReducers}). I just made "reducer" as a key, and passed allReducers as its value. My problem is then fixed.

user_143824030

Try this way

import { configureStore } from '@reduxjs/toolkit'
import { combineReducers } from 'redux'
const reducer = combineReducers({
  // here we will be adding reducers
})
const store = configureStore({
  reducer,
})
export default store;

Details Here

user_12833450

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.

user_134243900

my solution was:

 const rootReducer = combineReducers({
    users: reducer
})

const store = createStore(rootReducer);

canceled braces and change configureStore to createStore

user_129448290
Related