Redux: Handle an Action in the Store

Redux: Handle an Action in the Store
0

#1

Tell us what’s happening:

Getting no feedback :frowning:

Your code so far


const defaultState = {
  login: false
};

const reducer = (state = defaultState, action) => {
  // change code below this line
  return action.type === "LOGIN"
    ? ({...state, login: true})
    : state
  // change code above this line
};

const store = Redux.createStore(reducer);

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

Also tried:

...
  // change code below this line
  switch (action.type) {
    case "LOGIN":
      return { ...state, login: true }
    default:
      return state
  }
  // change code above this line
...

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/604.4.7 (KHTML, like Gecko) Version/11.0.2 Safari/604.4.7.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/redux/handle-an-action-in-the-store


#2

You are supposed to use a switch so the first snippet definitely wouldn’t work. As for the second example, can you give Object.assign() a go and see if it works? I think it’s quite possible that the editor is not liking the spread operator.


#3

Ok, it works with:

  switch (action.type) {
    case "LOGIN":
      return Object.assign({}, state, {login: true})
    default:
      return state
  }

Thanks for the help @honmanyau!

I think maybe the assignment could be edited to explicitly ask for a switch statement (I don’t see that in the requirements), especially in this case where a single-case switch statement is more verbose and not really more sensible/intuitive a solution than a ternary or if statement. Thanks again, just trying to add constructive criticism.


#4
 if(action.type === "LOGIN"){
      return {login:true};
    }
      return state;

This works btw.


#5

That does work for an example like this when you know that the state object only has a login property. In other words, if state had user property too, for example—

const defaultState = {
  login: false,
  user: “admin”
}

—you’d be leaving out the rest of the object.


#6

oh right, thanks for telling me that


#7

Really? No mention of that in the challenge.

Here is the text from the challenge:

After an action is created and dispatched, the Redux store needs to know how to respond to that action. This is the job of a reducer function. Reducers in Redux are responsible for the state modifications that take place in response to actions. A reducer takes state and action as arguments, and it always returns a new state. It is important to see that this is the only role of the reducer. It has no side effects — it never calls an API endpoint and it never has any hidden surprises. The reducer is simply a pure function that takes state and action, then returns new state.

Another key principle in Redux is that state is read-only. In other words, the reducer function must always return a new copy of state and never modify state directly. Redux does not enforce state immutability, however, you are responsible for enforcing it in the code of your reducer functions. You’ll practice this in later challenges.

The code editor has the previous example as well as the start of a reducer function for you. Fill in the body of the reducer function so that if it receives an action of type ‘LOGIN’ it returns a state object with login set to true. Otherwise, it returns the current state. Note that the current state and the dispatched action are passed to the reducer, so you can access the action’s type directly with action.type.


#8

You are right—I’m not sure what my line of thoughts was when I made that comment initially.

It doesn’t need to have a switch statement and any sort of switch-like mechanism can be used to pass the challenge; it can be a bunch of if and else if or a pile of nested ternary statements (in fact, the ternary statement in the first code snippet will let you pass the challenge).

In any case, and not to redeem myself for making a wrong assertion, writing it with a switch is still preferred simply because, in my opinion, it’s cleaner than other options.

I hope that’s a satisfactory answer.


#9

The next lesson teaches you to use a switch statement :wink: