Introduction
I have been developing various global state libraries for React. For example:
My main motivation is to eliminate selector functions that are only required for render optimization. Render optimization here means it avoids extra re-renders. An extra re-render is a re-render process that produces the same view result as before.
Since Recoil is announced, I’m very interested in atom abstraction because it eliminates selector functions for render optimization and the API seems pretty intuitive.
I couldn’t help stopping creating something by myself. This post introduces my challenges up to now with some notes.
Recoildux
My first challenge was to use a Redux store as an atom. Redux itself is very lightweight. Although the ecosystem assumes only one Redux store exists in an app, we could technically create as many stores as we want.
I have already developed a react redux binding for Concurrent Mode. It uses the upcoming useMutableSource hook, and most notably it doesn’t depend on React Context.
reactive-react-redux is the repository and especially #48 has the code as of writing.
Based on it, the implementation is pretty straightforward. Only the challenge is how to create a new atom based on existing atoms. I wanted to something similar to combineReducers, and created combineAtoms. Unfortunately, it didn’t go well: a) the API is not very flexible and b) the implementation is too hacky.
On the other hand, Recoil-like selector is implemented more cleanly and it’s flexible.
Here’s the repository.
dai-shi/recoildux
Unfortunately, the current implementation of atom has builtin reducer, and we can’t use custom reducer. Most of Redux ecosystem is not very usable for this, so it doesn’t get much benefit of using Redux. (Except that I could build it fairly quickly based on reactive-react-redux v5-alpha.)
#state-management #react-hook #react #javascript #sql
