Converting a Redux app to Recollect (how and why)

Recollect is a state management library for React.

It serves the same purpose as Redux, with some key differences:

• It doesn’t work in IE, because it uses the Proxy object.
• Because it uses the Proxy object, you don’t need to worry about immutability any more.

Recollect’s party trick is a store that behaves like a normal JavaScript object, but is internally immutable. So, if you want to toggle the complete status of a todo, you no longer need code like this:

You can just write todo.completed = !todo.completed.

This looks like it’s mutating the todo, but it isn’t. Internally, Recollect blocks the operation and does the same thing your Redux code does: creates a new version of the store with this change and passes it to the components that should be re-rendered.

Photo by Nick Fewings on Unsplash

Before I go on: I’m not at all picking on Redux. It’s fast, battle tested, and is my state management library of choice when I need to support Internet Explorer. But if you’re targeting…