CODEWITHSUNDEEP
javascriptreduxreact-redux
Lorenzo Case Del Rosario
Lorenzo Case Del Rosario

Reputation: 83

React-Redux increment / decrement issue

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.

Upvotes: 0

Views: 2093

Answers (3)

Max
Max

Reputation: 1567

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?

Upvotes: 1

Sanket Shah
Sanket Shah

Reputation: 3091

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;
  }
};

Upvotes: 1

Emmanuel Ponnudurai
Emmanuel Ponnudurai

Reputation: 1084

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,
      };

Upvotes: 0

Related Questions