Why does my Redux reducer think my state is undefined?

redux reducers
chum of chance picture chum of chance · Jun 24, 2016 · Viewed 15.8k times · Source

I believe I'm copying the Todo tutorial pretty much line for line, I am getting this error:

Error: Reducer "addReport" 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.

And here is my addReport reducer:

const addReport = (state = [], action) =>
{
  console.log(state)
  switch (action.type) {
    case ADD_NEW_REPORT:
    return [...state,
      addReports(undefined, action)
    ]
    }
}

I added the logging statement and can verify that it returns an empty array. Even setting state to something like 1 will produce the same results. What am I missing?

Answer

Elod Szopos picture Elod Szopos · Jun 24, 2016

You are missing the default of the switch case. 

default: {
  return {
    ...state
  }
}

Redux won't play along like a nice kid if you forget to do it!

Or alternatively, you can explicitly return at the end the initial state: If the state passed to the reducer is undefined, you must explicitly return the initial state.

Related questions

Can I dispatch an action in reducer?

is it possible to dispatch an action in a reducer itself? I have a progressbar and an audio element. The goal is to update the progressbar when the time gets updated in the audio element. But I don't know where …

Read More
Redux store does not have a valid reducer

Haven't been able to find anything around here regarding this error: "Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers." My reducer export default function FriendListReducer(state = {friends : []}, …

Read More
Update single value in item array | react redux

I have a todo list and want to set the state of that item in the array to "complete" if the user clicks on "complete". Here is my action: export function completeTodo(id) { return { type: "COMPLETE_TASK", completed: true, id } } …

Read More