Use a Switch Statement to Handle Multiple Actions

Tell us what’s happening:
I’m trying to complete some Redux challenges using the es6 spread operator feature and It seems to break something in the page, because tests are not running anymore,

Note that the same code with the horrible “stringify + parse” approach works fine.

Your code so far


const defaultState = {
  authenticated: false
};

const authReducer = (state = defaultState, action) => {
  // change code below this line
  switch (action.type) {

    case 'LOGIN':
      return { ...state, authenticated: true };

    case 'LOGOUT':
      return { ...state, authenticated: false };

    default:
      return state;
  }

  // change code above this line
};

const store = Redux.createStore(authReducer);

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

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions

2 Likes

You did it right, just a very tiny issue in you code.

Not sure what does ... mean in your code before the state, ...state to state, and i think it looks good.

(sorry, wrong answer here)

Hi!

Thanks for answer.

Dots ( ... ) are the ES6 Spread Operator, which is used to destructure objects / arrays.

{ ...state, authenticated: true }

This line means : "Create a new object with all the state’s fields (destructuring), and a new field ‘authenticated’ with value ‘true’ ".

I want to emphasize the fact that the tests are not failing. They are just not being executed.

Cheers!

DUDE! wow, I really didn’t know that! and no surprise since I never do UI so professional. Thanks for mentioning.

I need to not take JS stuffs easy as I used to many years ago.

Keep going on great work, happy programming.

Hi, I didn´t kow about the … spread operator, thank you to add information. I share my solution, is very close to yours :slight_smile:

const defaultState = {
authenticated: false
};

const authReducer = (state = defaultState, action) => {
   // change code below this line
       switch (action.type) {

      case 'LOGIN':
     return { authenticated: true };

      case 'LOGOUT':
     return {authenticated: false };

     default:
    return state;
      }
   // change code above this line
      };

  const store = Redux.createStore(authReducer);

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

    const logoutUser = () => {
   return {
    type: 'LOGOUT'
      }
   };
8 Likes

Yeah!

It looks good. I think FCC is not supporting some ES6 features yet, which is quite strange, because array spreading seems to work fine.

Since I leant ES6, I am no longer using the .concat() approach to copy / concat arrays. I feel so comfortable with spread operator:

Concat two arrays is that simple:

const bigArray = [ ...smallArray1, ...smallArray2 ];

Copy an array even simpler (and IMHO, syntactically more expressive once you know the operator syntax ):

const myCopy = [ ...originalArray ];

Note that both statements create a new object, which is really interesting because in many cases we don’t want to modify the original one.

As a fullstack JS developer, I really encourage you to learn a little bit of ES6

Cheers!

3 Likes

Hi, just as a reference to anyone who gets stuck on this in the future, the code below passes the tests since they only look for this one property, not the entire state object (assuming it contained multiple fields, not just ‘authenticated’):

  switch(action.type) {
    case 'LOGIN': 
      return {authenticated: true};
    case 'LOGOUT': 
      return {authenticated: false};
    default: 
      return state;
    }

I like how you used the spread operator, though. :slight_smile:
May I ask, what did you mean by “stringify + parse”?

4 Likes

Why one of these answers are not made official answer in hint section?

So I had a similar answer (though I needed a refresher on switch statements). In the code lines here is what I came up with.

switch (action.type) {
case ‘LOGIN’:
return {authenticated: true};

case 'LOGOUT':
return {authenticated: false};

default:
return defaultState;        //where my answer differs here

}

the default: return defaultState works with no errors.

i think it’s wrong pbrook72. that was my initial answer until i saw the comments written before you, see …what you just wrote means that every time an action that has nothin to do with those reducers is dispatched and those 2 will run again, it will run a false authentication value instead of the current…so the right thing to do is to return the current state which in the reducer function is an argument called “state”.