Use a Switch Statement to Handle Multiple Actions

Use a Switch Statement to Handle Multiple Actions
0.0 0

#1

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

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)


#3

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!


#4

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.


#5

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'
      }
   };

#6

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!