Confusion with how Redux immutability works

Question

I was learning Redux and I faced some confusion with how reducer updates the state. For example here is the code:

const initialState = {
  counter: 0
};

const counterReducer = (state = initialState, action) => {
  if(action.type==="INCREASE"){
    return {
      counter: state.counter+1;
    }
  }
  return state;
};

The question is when this code counter: state.counter+1; is run will it change counter from 0 to 1 here

const initialState = {
  counter: 0
};

What confuses me is that if it changes immutably, what makes it possible that the previous state is remembered if this code is run:

  if(action.type==="INCREASE"){
    return {
      counter: state.counter+1;
    }

more than once. Hope you got my point if not pls let me know

Short answer, no, it will not change the value of `initialState` nor of the property `counter` on initial state. This is because the function, if the proper `action.type` is passed, will return a reference to a new `object` created by the `return {...}` statement. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer — wlh, Mar 27 '20 at 18:53
Hope this answers your question https://stackoverflow.com/questions/34958775/why-should-objects-in-redux-be-immutable — Muhammad Haseeb, Mar 27 '20 at 18:55
@wlh, just imagine on the first button click "INCREASE" action is dispatched and in here state.counter+1; state is taken from initial state. Is that correct? But when you click the button the second time. Where is current state of 1 taken? — Mir, Mar 27 '20 at 19:31
Your reducer requires state to be passed in. So you have to make sure state is being passed to the reducer each time. Moreover, you need to have a place to store state afterwards. This is where some sort of `Provider` with a `store` comes into play. — wlh, Mar 27 '20 at 19:40

Nikko Khresna · Answer 1 · 2020-03-27T19:14:47.260

0

The counterReducer does not need access to previous state.

state.counter+1; is accessing current value of state.counter, not the previous value.
I hope i didnt misunderstood the question.

Edit 1 for question: Khreshna, ok but where does current state come from?
If you are familiar with other language "10" + 1 will return variety of error saying you cant make math operation with string and integer. But not javascript.

JS has type coercion, meaning it can convert types to another types regarding operation.
Long story short in JS "10" + 1 will return 101 (int 1 is converted to string).
In null + 1 will return 1. And thats how you got the value even though you never set the value for counter

edited Mar 27 '20 at 19:14

answered Mar 27 '20 at 18:53

Nikko Khresna

1,024
8
10

Khreshna, ok but where does current state come from? – Mir Mar 27 '20 at 19:07
sorry Nikko you a bit misunderstood me, I meant that just imagine on the first button click "INCREASE" action is dispatched and in here state.counter+1; state is taken from initial state. Is that correct? But when you click the button the second time. Where is current state of 1 taken? – Mir Mar 27 '20 at 19:26
you pass the current state as argument in `const counterReducer = (state = initialState, action) => {`, so it is taken from function argument. – Nikko Khresna Mar 27 '20 at 19:43

Confusion with how Redux immutability works

1 Answers1