[Solved] Error: The slice reducer for key “communicationStatus” returned undefined during initialization. If the state passed to the reducer is undefined

Problem

Error: The slice reducer for key “apiCommunicationStatus” 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.

I had set InitialState and created a reducer in my redux createStore method, and I corresponding InitialState as second arguments

const apiCommunicationStatusReducer = (state , { type }) => {
    debugger
    switch (type) {
        case 'CRETAE_NEW_MESSAGE':
            return "WAITING";
        case "NEW_MESSAGE_SERVER_ACCEPTED":
            return "READY"
    }
}
const combineReducer = combineReducers({
    userStatus: userStatusReducer,
    messages: messageReducer,
    apiCommunicationStatus: apiCommunicationStatusReducer
})
const store = createStore(
    combineReducer,
    applyMiddleware(logger)
);

Solution:

The issue is pretty straightforward. So if I set an initial state when creating the store… why would redux want to evaluate the ‘reducer’ with an undefined state?

When I start to debug the code, I understand that the state is undefined, so I solved the below issue in two ways.

Solution 1: Return an undefined state={}

So, If a developer wants to initialize no default state when he creates the reducer he should add empty {} as a default state in the state parameter. in the below code line 1: initialized the state={} and line 9: return the state. meaning if no default state is mentioned, the null object state will be returned when the reducer is created.

const communicationStatusReducer = (state = {}, { type }) => {
    debugger
    switch (type) {
        case 'CRETAE_NEW_MESSAGE':
            return "WAITING";
        case "NEW_MESSAGE_SERVER_ACCEPTED":
            return "READY"
    }
    return state
}

Solution 2: Return state=default state

If a developer wants to initialize a default state when he creates the reducer, he should mention the Initial state as a default state in the state parameter . in the below code lines 1,2,3: initialized the state and line 13: return the state. meaning if no default state matches in the switch statement mentioned, the default object state will be returned when the reducer is created.

const defaultStatus = {
    "READY": "True"
}

const communicationStatusReducer = (state = defaultStatus, { type }) => {
    debugger
    switch (type) {
        case 'CRETAE_NEW_MESSAGE':
            return "WAITING";
        case "NEW_MESSAGE_SERVER_ACCEPTED":
            return "READY"
    }
    return state
}

Summery

In short,

1. If a developer wants to initialize no default state when he creates the reducer he should add empty {} as a default state in the state parameter

2. If a developer wants to initialize a default state when he creates the reducer, he should mention the Initial state as a default state in the state parameter

I hope, the above solutions, you find them helpful.

Shivaraju M
Shivaraju M

Over 3+ years experience in IT industry, good knowledge in . Net-based Web applications, windows applications, web services, and SPAs. I have played
multiple roles related to technical delivery in multiple domains while working on over 10+ technologies. I am
currently focused on continuous improvement and agile project management.

Leave a Reply