React-Redux increment / decrement issue

Question

I'm doing some React-Redux practice and I've noticed a behaviour I can't understand: it works or not depending on if I use + 1 / - 1 or ++ / -- operators.

This is my reducer:

const counterReducer = (state = { counter: 0 }, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        counter: state.counter + 1,
      };
    case "DECREMENT":
      return {
        counter: state.counter - 1,
      };
    default:
      return state;
  }
};

and it works fine.

but if I change the increment and decrement to:

const counterReducer = (state = { counter: 0 }, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        counter: state.counter++,
      };
    case "DECREMENT":
      return {
        counter: state.counter--,
      };
    default:
      return state;
  }
};

It will still fire the action without updating the Redux state.

score 1 · Accepted Answer · answered Aug 31 '21 at 15:00

Because in the second reducer you're using prefix operator:

const counterReducer = (state = { counter: 0 }, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        counter: state.counter++, //<--- prefix operator
      };
    case "DECREMENT":
      return {
        counter: state.counter--, //<--- prefix operator
      };
    default:
      return state;
  }
};

If you use the ++ operator as a prefix like: ++var, the value of var is incremented by 1; then it returns the value.

If you use the ++ operator as a postfix like: var++, the original value of var is returned first; then var is incremented by 1.

So need to use postfix operator in counterReducer instead of prefix operator:

const counterReducer = (state = { counter: 0 }, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        counter: ++state.counter, //<--- postfix operator
      };
    case "DECREMENT":
      return {
        counter: --state.counter, //<--- postfix operator
      };
    default:
      return state;
  }
};

Thank you very much, I didn't now the existence of postfix operators. — Lorenzo Case Del Rosario, Aug 31 '21 at 15:17
You're Welcome! Happy Coding :) And as @Max suggested You should not use increment/decrement operators in redux reducers, because state is meant to be immutable. — Sanket Shah, Aug 31 '21 at 15:18
You should never use `--state.counter` or `++state.counter` because it mutates state, best to do `state.counter = state.counter + 1` — HMR, Aug 31 '21 at 16:15

score 1 · Answer 2 · answered Aug 31 '21 at 15:01

You should not use increment/decrement operators in redux reducers, because state is meant to be immutable. You're first example is the the preferred pattern in Redux: https://redux.js.org/faq/immutable-data#why-is-immutability-required-by-redux

However, the reason you see that behavior is because const y = x++ assigns the value and then increments x. If you want to increment and then assign the value, you would need to do const y = ++x.

Incrementing in C++ - When to use x++ or ++x?

So by using the ++ / -- operators (bothe prefix or postfix) I will always be mutating the state and it shouldn't be done, right? — Lorenzo Case Del Rosario, Aug 31 '21 at 15:20

score 0 · Answer 3 · answered Aug 31 '21 at 15:00

0

state.counter++ updates the value of state.counter inplace so its an action. The value at that point still remains 1.

This would work,

state.counter++;
return {
        counter: state.counter,
      };

answered Aug 31 '21 at 15:00

Emmanuel Ponnudurai

991
7
16

React-Redux increment / decrement issue

3 Answers3