React Redux immutability cheat sheet

Question

I'm currently learning react with redux and know that immutability is a key component of these technologies, yet am struggling to fully understand how to implement it.

As such I was wondering if there were any cheat sheets for react/redux immutability out there?

If not, what were your preferred methods of implementing immutability in your react redux applications?

Answer 1

By its very nature, Redux application state is already immutable. Redux destroys your application state and rebuilds a brand new one every time you fire off an action (which triggers a reducer that rebuilds state). So there is no cheatsheet for making Redux work immutably because it already does.

You might be getting confused because there are libraries that deal with immutable structures, like Immutable.js, and there are packages for incorporating those into Redux such as redux-immutable. While using Immutable.js would mean that your individual pieces of state are saved as Immutable structures, this is not necessary to make your application state immutable because the fundamental nature of your application state is already immutable with or without a library. Using Immutable.js with Redux is mostly useful for things like quickly comparing props passed down from the state to see if they have changed so you can bypass re-renders.

Answer 2

I just wrote a blog post about this! You can find it here: http://www.curbitssoftware.com/2017/08/25/react-redux-immutable-update-cheat-sheet/

One thing that is really important when working with Redux is that you should never mutate (change directly) your state. Instead you should always return a copy of the state that you change (a common misconception is that you need to copy/clone everything, read more here and here. This means you need to learn new ways of working with arrays, changing the property of objects and so on. To make this easier we wanted to share our own cheat sheet / recipe book for the most common cases.

Good luck!