Redux: Use a Switch Statement to Handle Multiple Actions

I fail to see why my code doesn´t pass the test:

const defaultState = {
  authenticated: false
};

const authReducer = (state = defaultState, action) => {
  // change code below this line
switch(action.type) {
  case "LOGIN":
{authenticated: true}
    break;
  case "LOGOUT":
{authenticated: false}
    break;
  default:
state
}
  // change code above this line
};

const store = Redux.createStore(authReducer);

const loginUser = () => {
  return {
    type: 'LOGIN'
  }
};

const logoutUser = () => {
  return {
    type: 'LOGOUT'
  }
};
1 Like

You forgot to return the data!

case "LOGIN":
  return {authenticated: true}

Also return it for the LOGOUT and default case.

3 Likes

Why do I need return though? Wouldn´t it return anyway with “break”?

The break just breaks out of the switch statement.

If you want it to work with break, you will need to do this like this:

const authReducer = (state = defaultState, action) => {
  // change code below this line
  let newState;
  switch(action.type) {
    case "LOGIN":
      newState = {authenticated: true}
      break;
    case "LOGOUT":
      newState = {authenticated: false}
      break;
    default:
      newState = state
  }

  return newState;
  // change code above this line
};

You always have to return the value!

If you do it with the inline return as I suggested before, you don’t need to use break keyword, because once you return the value, the function will stop executing further.

2 Likes

Your code has been blurred out to avoid spoiling a full working solution for other campers who may not yet want to see a complete solution. In the future, if you post a full passing solution to a challenge and have questions about it, please surround it with [spoiler] and [/spoiler] tags on the line above and below your solution code.

Thank you.

3 Likes

husseyexplores is correct. You need a return. Without the return, your reducer (a function) would not return anything. Reducers have to return what you want the new state to be, always. They have to return some version of the state, even if it is just the original one that was passed in. A break will break you out of the switch but it will not return anything. husseyexplores, in his latest post, offers a different way, where you break out of each case and then have one return at the bottom. This works but (as husseyexplores knows) is not the standard way in redux. Typically (as husseyexplores initially suggested) you return the new state you want out of each case block. At the end you have a default where you return the unchanged state that was passed into your reducer. There is no need for break statements because the return statement exits the function immediately. This is the standard redux way to do it. You will see things like:

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

That looks a little weird if you are not used to seeing multiple return statements or assume that you need break statements. But it is perfectly acceptable JavaScript and works perfectly. It’s just a different way of controlling the flow of code and you’ll get used to it.

3 Likes