Write a Counter with Redux

Write a Counter with Redux
0

#1

Tell us what’s happening:

Your code so far


const INCREMENT = 'INCREMENT'; // define a constant for increment action types
const DECREMENT = 'DECREMENT'; // define a constant for decrement action types

const counterReducer = (state = 0, action) => {
  switch(action.type){
  case INCREMENT: 
    return state + 1;
  break;

  case DECREMENT : 
    return state -1;
  break;

  default: 
 return state;

  }
  
}; // define the counter reducer which will increment or decrement the state based on the action it receives

const incAction = () => {
  return {
    type : INCREMENT
  }
}; // define an action creator for incrementing

const decAction = () => {
  
  return {
    type: DECREMENT
  }
  
}; // define an action creator for decrementing

const store = Redux.createStore(counterReducer); // define the Redux store here, passing in your reducers

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/redux/write-a-counter-with-redux


#2

Passes for me, did you have a question?


#3

Hi there,
in place of:
case INCREMENT:
return state + 1;
break;

I wrote:
return state++;
and it won’t work. Would anyone care to explain why?


#4

One of the rules of Redux is “Do not mutate state.” You are not supposed to change it.

return state + 1; does not mutate state. It creates a new number by taking the old state and adding 1 to it.

return state++; is actually changing state. It is going to that memory location and changing the variable adding 1 to it, altering the original.

Never mutate state. Period. Every time we mutate state, a puppy dies. Or more accurately, Redux cannot work properly.


#6

Sir, when an action is dispatched to the store won’t it is going to call counterReducer with parameter state = 0
again and not with previous value of state? Sir I don’t know how counterReducer function works behind the scenes


#7

when an action is dispatched to the store won’t it is going to call counterReducer with parameter state = 0 again and not with previous value of state?

No. You are not understanding the ES6 feature of default parameters.

Yes, normally if you do state = 0, you are assigning the value of 0 to the variable state. But, if it is inside the parameters of a function, it will only happen if the value is undefined. So, after the first time, state is not undefined so it will not get 0 assigned to it.

Let us know if this still isn’t clear.


#8

Sir, I understand the concept of default parameters, if I don’t explicitly give arguments to the function, It will call state = 0(default value). But what I do not understand, How is it going to increment or decrement the same (state) value? for. for eg. If I am giving INCREMENT action 2 time will the state be 2 or 1 and why?


#9

Because inside your reducer you have:

switch(action.type){
  case INCREMENT: 
    return state + 1;

  case DECREMENT : 
    return state -1;

  default: 
    return state;
}

When you return state + 1, that becomes the new state for that property of the store. That’s how you tell a reducer what the new state should be, you return the new value.

If you call it with ADD, it is going to return the old state plus 1 and that becomes the new state (on that property of the store, in this case, probably store.counter.

Is that clear? Yes, it is an odd way to think, but once you wrap your head around it, it makes sense.


#10

Now I get it sir , thank you for having patience with me and my stupid questions because I am very new to programming


#11

There’s nothing “stupid” about it. It confused the heck out of me when I was learning it, too. Never stop asking questions. The people I pity are the people too embarrassed or proud to ask.


#12

Just a little syntax improvement: You can do this:

const decAction = () =>({
    type:DECREMENT
})

shorter/cleaner :wink:


#13

Whether or not that is an improvement is debatable. I’d agree that it’s about 75% right. But I often do the return statement in the beginning for debugging purposes and then convert them over afterwards. Of course, it all compiles into the same thing, so all you’re saving yourself is a few lines of text.