CODEWITHSUNDEEP
reactjsreact-redux
karan patel
karan patel

Reputation: 61

I am getting initialization error in the following react-redux code

I am getting the following Error: Reducer "counter" returned undefined during initialization If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined. This error is coming when I try to combine 2 reducers.

import counterReducer from "./counter"
import loggedReducer from "./isLogged"
import {combineReducers} from "redux"

const allReducer = combineReducers({
    counterReducer,
    loggedReducer
})

export default allReducer
My counter-reducer file code is :

const counterReducer = (state ={counter:0},action) =>{
    switch(action.type){
        case "INCREMENT":
            return state.counter + 1
        case "DECREMENT":
            return state.counter - 1    
    }
}
export default counterReducer;

my index.js code is :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import "bootstrap/dist/css/bootstrap.min.css"
import App from './App';
import * as serviceWorker from './serviceWorker';
import {createStore} from "redux";
import allReducer from "./Reducers"

const store = createStore(allReducer);

Getting above mentioned error while running this last line.

Upvotes: 3

Views: 5261

Answers (3)

Nafiz Bayrak
Nafiz Bayrak

Reputation: 200

const counterReducer = (state ={counter:0},action) =>{
switch(action.type){
    case "INCREMENT":
        return state.counter + 1
    case "DECREMENT":
        return state.counter - 1    
}

} export default counterReducer;

change this code like below

const counterReducer = (state ={counter:0},action) =>{
switch(action.type){
    case "INCREMENT":
        return state.counter + 1
    case "DECREMENT":
        return state.counter - 1    
    default:
        return state;
}

} export default counterReducer;

Upvotes: 1

Sultan H.
Sultan H.

Reputation: 2938

This is known as Redux initialization error, it happens when Redux fires multiple dispatches at the very first mount of your application, where it's being initialized for the first time.

From the logic behind how reducers work, a dispatch for an Action in redux is meant to tell a specific Reducer that some piece of data within it needs to be changed depending on the Action Type/Payload that got dispatched.

In a Reducer, we catch the dispatched Action by providing -commonly- a case with-in a JS switch that matches the Action Type that got dispatched, we do the logic, return a new state to update the state with-in that Reducer.

Since that is the normal flow and behavior of the communication between an Action and a Reducer in Redux, and we now know that Redux fires an Initialization Action at the very first mount, what case do we provide to handle this Initialization Action? since we are using switch it has to be the default case of js switch!

Consider adding a default case at at the end of each of your Reducers to catch all non-related Actions for a specific reducer, such as the Initialization Action, or any other non handled actions around the app.

Supposing that you're are using switch to control behavior at your reducers:

switch(action.type){
  //..Some special cases you have written.
  // The next 3 lines fix the problem.. add it to the end of each of the reducers you have in your app.
    default: {
        return state;
    }
}

Upvotes: 12

Khadim H.
Khadim H.

Reputation: 645

Insert default case in switch your both Counter and isLogged component:

const counterReducer = (state=0,action) => {
    switch(action.type){
        case 'INCREMENT':
            return state+1;
        case 'DECREMENT':
            return state-1;
        default:
            return state
    }
}

export default counterReducer;

Upvotes: 4

Related Questions