React useReducer sets the whole state as undefined

Question

I'm having a problem where updating my Context state with a reducer, sets the whole state as undefined... This is my code:

const [state, dispatch] = useReducer(AccountReducer, initialState);

The call to the Dispatch

 dispatch({
  type: SET_TOKEN,
  payload: token
})

And the reducer

  const AccountReducer = (state, action) => {
   switch (action.type) {
    case SET_TOKEN:
      return {
        ...state,
        token: action.payload
      }

    default:
      break
  }
};

After I make the dispatch the whole state is set to undefined.... Any ideas on why this is happening?

score 1 · Answer 1 · answered Feb 08 '22 at 21:42

A reducer must return the new state value each time it is called. In your default case you return nothing (undefined), which will be your next state.

Simply return the last state in the default case:

 const AccountReducer = (state, action) => {
   switch (action.type) {
    case SET_TOKEN:
      return {
        ...state,
        token: action.payload
      }

    default:
      return state; // Return the same value passed in to be used as the next state
  }
};

I'm working under the assumption that SET_TOKEN is a variable shared between the dispatch call and the reducer. If they do not match, this will also cause problems.

React useReducer sets the whole state as undefined

1 Answers1