What are the consequences of mutating state in a reducer?

by

Mutating state is an anti-pattern in React. React uses a rendering engine which depends on the fact that state changes are observable. This observation is made by comparing previous state with next state. It will alter a virtual dom with the differences and write changed elements back to the dom.

When you alter the internal state, React does not know what’s changed, and even worse; it’s notion of the current state is incorrect. So the dom and virtual dom will become out of sync.

Redux uses the same idea to update it’s store; an action can be observed by reducers which calculate the next state of the store. Changes are emitted and for example consumed by react-redux connect.

So in short: never ever, mutate state. Instead of Object.assign you can use the stage-3 spread syntax: 

{...previousState,...changes}

Also please note, this is true for arrays as well!

More Related Contents:

  1. Working with CSS in React [closed]
  2. axios post request to send form data
  3. How to dispatch a Redux action with a timeout?
  4. What is mapDispatchToProps?
  5. How can I display a modal dialog in Redux that performs asynchronous actions?
  6. React Context vs React Redux, when should I use each one? [closed]
  7. What is the best way to access redux store outside a react component?
  8. How do I test axios in Jest?
  9. Understanding React-Redux and mapStateToProps()
  10. React-Redux: Actions must be plain objects. Use custom middleware for async actions
  11. How to reset TabNavigator when user logs out (from other screen)
  12. Next.js – Error: only absolute urls are supported
  13. Stop useEffect from running on mount
  14. Use Connect or pass data as props to children
  15. How do I access store state in React Redux?
  16. Cannot call reactReduxFirebase() – TypeError: Object is not a function
  17. Use history.push in action creator with react-router-v4?
  18. Changing the layout of a component depending on Redux state
  19. Getting error Cannot read property ‘setState’ of undefined
  20. React router, pass data when navigating programmatically?
  21. How to give Image src dynamically in react js?
  22. Global state in React Native
  23. Redux Presentational Components Vs Container Component
  24. How can I dispatch function in redux?
  25. Component won’t update when a redux state change occurs
  26. How to enable file upload on React’s Material UI simple input?
  27. how to async/await redux-thunk actions?
  28. Cache busting with CRA React
  29. how to set initial state in redux
  30. How do I see state when logging to the console instead of Proxy object inside reducer action?

Leave a Comment