Redux - Use a Switch Statement to Handle Multiple Actions

JavaScript
1

Tell us what’s happening:
I am struggling to understand why my answer couldn’t pass 2 test which are

Dispatching loginUser should update the authenticated property in the store state to true .

Dispatching logoutUser should update the authenticated property in the store state to false .

I had to see for the hint and it says case should be “LOGIN” or “LOGOUT” but failed to understand why not loginUser and logoutUser

Your code so far

const defaultState = {
  authenticated: false
};

const authReducer = (state = defaultState, action) => {
  // Change code below this line
  switch(action.type){
    case "loginUser":
      return state = true
    case "logoutUser":
      return state = 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Redux - Use a Switch Statement to Handle Multiple Actions

Link to the challenge:

2

Even without digging into your question, I see two big problems here:
This line:

return state = true

First of all, what is state? Look here:

const defaultState = {
  authenticated: false
};

State is an object. Why are you trying to change it to a boolean value? You need to return an object.

Secondly, you are trying to mutate state. Never mutate state. Do not change state. If you see state = ... or state.someProp = ... then that is a warning sign. You should not be reassigning or altering state. You should be creating a new state and returning that - you return what you want the next state to be. Never change the state, make a new one.

3

Because your action creators are using those.

You are creating an object with this:

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

Note what “type” is. When that object gets dispatched to redux (which for this test is happening invisibly behind the scenes), it gets pumped through the reducer. In the reducer, you are looking for those types:

  switch(action.type){
    case "loginUser":

The “action” is the object that they above action creator created, and dispatch passed to the reducer. It is checking the “type” of that particular action. If it matches one of the cases, it will do something. if it doesn’t, it will just do the default, return unchanged state, and state stays the same.

4

Following in my code now, still cannot pass 2 test

const defaultState = {
  authenticated: false
};

const authReducer = (state = defaultState, action) => {
  // Change code below this line
   switch(action.type){
     case 'loginUser':
      return{
        authenticated: true
      }
     case 'logoutUser':
      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'
  }
};

I am very lost, is this normal? so many moving parts, and so many hard words like action creator, dispatcher etc.

5

You’re almost there, just two small changes…

Here:

   switch(action.type){
     case 'loginUser':

What string should your reducer be listening for? It is the type property on the action. Remember that an action is an object with at least a property of “type” that is a string. I think of an action as an order form, like you’d fill out in a sandwich shop. The action creator fills out that order form for you. An action creator is a function that returns and action. This is your action creator:

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

What is the type it is creating? It is the string “LOGIN”. That is the type that your reducer should be listening for. Those have to match. Your action creator is following the normal convention of SCREAMING_SNAKE_CASE for the type, so the reducer should be changed.

Remember that this is being tested behind the scenes. Redux’s dispatch function is calling the action creator to get the action object and that is being pumped through the reducer.

I am very lost, is this normal?

No, you are the first person ever to be confused by this. Oh, no, wait, the opposite of that. Yeah, everyone struggles with this - this is confusing stuff. I remember learning React and being confused as hell. And just when I started to feel comfortable with that, wham! They hit me with Redux. and that confused the hell out of me. To be honest, I think I spent 6 months on the job, using Redux professionally, before it really clicked what was actually happening. Yeah, it’s confusing, but once you wrap your head around it, there is a kind of beauty to it and it can be quite powerful. But yeah, it takes a little while. It’s a different way of thinking.

Redux is hard to teach because there are so many interlocking parts that depend on each other. I might recommend looking up some youtube videos to get some other perspectives - they might gradually sink in.

6

Action creator, action type, store, reducer etc, its really just fancy words which aim to describe something, to name a purpose. In the end, some of them are just basic values. You can see we use switch case, which really is a simple way of checking if a value is strictly equal to another value. For example 1 === 1? Or action.type === 'loginUser' ?
Where does action.type comes from? Well type is a prop declared on the “action” object. We pass that object as the second parameter of authReducer function. The reducer purpose is to take the state, take an action and transform the state, based on the action. My state could be a simple counter(some object that holds a number) and i might want to pass an action “add” and add somethign to that counter.
So lets see where the “action” we pass to the reducer comes from? It comes from the “action creator”. Bellow we have the action creators. e.g. const loginUser = () => ({ type: 'LOGIN' }). Its a fancy function with a fancy name, fancy term, but if you look careful, youll notice, all it does is to return a simple object - { type: 'LOGIN' }. Now, if we pass that action creator the the reducer(we actually call it, before we pass it), e.g. loginUser(), it will return that same object. In the context of the reducer(“authReducer”), this object will be the action argument. In the switch we look whats the type. Well, the type prop has value “LOGIN”. So, when the type is “LOGIN” we want to “authenticate” the user i assume.
PS: all that process, declaring an action creator, an action object with a type, reducer etc, its a complex syntax, some sort of convention to operate, which makes it universal and reusable, the redux logic, but in the end, it really is, “do something based on what you’ve been told to do”.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.