React Redux, Am I mutating state here?

redux remove item from object
redux mutate state in reducer
redux initial state
redux never mutate state
redux-immutable
redux: remove an item from an array
redux update item in array
react redux update state

I am playing around with a simple React Redux app that increments a counter each time a button is clicked. I am testing two different methods of incrementing my counter in my Redux Reducer. Both methods are changing the state in the reducer however one of these methods is not causing my counter to rerender.

Here is the reducer which will cause the page to rerender:

const reducer = (state={speed: 0}, action) => {

  if(action.type ==='INCREMENT_SPEED'){
    state = {...state, speed: state.speed+=1 
    }
    return state 
}

and here is the code that functions but will not cause the page to rerender with the proper value.

const reducer = (state={speed: 0}, action) => {

      if(action.type ==='INCREMENT_SPEED'){
        state.speed++ 
    }
    return state 
}

The only difference is the way in which I am updating state. My guess is that using the ++ incrementer is actually mutating state which is not seen as a change and hence does not cause the page to render.

If it helps here is the part of the code that appends to the DOM:

render() {
    return (
      <div>

        <p>SPEED: {this.props.reduxState.reducer.speed}</p>

      </div>
    )
  }
}

You're correct in your assumption. In the second example you're mutating the state and that will not trigger a re-render. You should never mutate the state. Always make a copy of the state and return a new state.

Immutable Data, Why will shallow equality checking not work with mutable objects? Why does a reducer mutating the state prevent React-Redux from re-rendering a It is here that combineReducers uses shallow equality checking to determine whether the​  It'll work, but mutation is generally considered a poor practice in React apps (and can often cause bugs). Try to avoid doing that whenever possible. You might want to read through the Immutable Update Patterns page in the Redux docs (which is not Redux-specific), as well as the articles in the Immutable Data section of my React/Redux links list .


Yes you are mutating the original state instead of returning new state object with incremented counter.

You could do like that(not much sense in this case but shows the problem)

const reducer = (state={speed: 0}, action) => {

  if (action.type ==='INCREMENT_SPEED'){
    state = {...state} // copy the state to a new object
    state.speed++; // increment the new object

    return state; // return the new state object 
}

That way it's a new object so the old state objects remains immutable

Immutable Update Patterns, Here are some examples for some of the more common tasks you might have to implement. Since we don't want to mutate state directly in reducers, those should Others, like immutability-helper (a fork of the now-deprecated React  Redux- How to Tell if App's State is Mutating? New to React.js, I am currently making a game using React.js with Redux, specifically Dungeon Crawler as well as Redux-Dev Tool. At the moment, I am able to have the player make attack to the enemy, as well as the enemy attacking the player by decreasing their health points (based on their attack


If you checkout Redux doc you will find that they suggest using either Object.assign() or Object spread syntax to prevent mutating the state.

Both solutions are viable.

On a side note, the use of switch statements for reducers is encouraged.

Using Object.assign()

const reducer = (state={speed: 0}, action) => {
  switch (action.type) {
    case 'INCREMENT_SPEED':
      return Object.assign({}, state, {
        speed: state.speed + 1
      })
    default:
      return state
  }
}

Using Object spread syntax

const reducer = (state={speed: 0}, action) => {
  switch (action.type) {
    case 'INCREMENT_SPEED':
      return {...state, speed: state.speed + 1}
    default:
      return state
  }
}

Why cant state be mutated. · Issue #758 · reduxjs/redux · GitHub, Furthermore.. I would think that a lot of what Reduct offers could be added to the react-core, and maybe even take advantage of its DOM diffing  That’s why, the state that all the reducers will receive is the default state. Wait, aren’t you mutating the state?: Nope, I’m changing the state reference to undefined, not mutating it. Remember that mutating the state goes against Redux principles. Per-Reducer Reset Logic


Redux: Never Mutate State - JavaScript, on the Redux store should add a todo item and should NOT mutate state. { return { type: ADD_TO_DO, todo:'Learn React' } } const store = Redux. don't mutate state here or the tests will fail return state.concat(action.todo);  Note that I’m not mutating the state here, I am merely reassigning the reference of a local variable called state before passing it to another function. Mutating a state object would be a violation of Redux principles.


Immutability in React and Redux: The Complete Guide, Here's a before-and-after, starting with the plain JS version of a Immer works well with plain React state, too – the “functional” (state, draft => {}) as we did in the reducer example. There's an error in description of array methods in 'JS Array Methods That Mutate' section. Per my post Idiomatic Redux, Part 1 - Implementation and Intent, the Redux core itself doesn't actually care about mutation at all - it's primarily the React-Redux UI layer that does, as well as the DevTools.


Redux immutable update patterns, In this post, we will learn more about Redux, why immutable update is of data and in reaction, dispatch a notification, change or event loaders might be We have all sorts of data types here — string , boolean , array , and object . The original state or its params will not be changed (or mutated); but new  React on the left. Redux on the right. Now given that these two apps achieve the exact same thing, you might be wondering why Redux requires so many additional files, and what purpose they serve.