RecoilJS part one, installation and basic use

Why RecoilJS appeared

Redux seems to be the most popular and powerful state management library in the react ecosystem, mobx is also really popular and impressive, the react Context is also not a bad tool, so why does Facebook broadcast it? Recoil ? Here are some advantages of recoil over redux :
1. Create a simple state management tool, with an intuitive syntax similar to the pure state of react .
2. Asynchronous state management support.
3. Provide the ability to store long-term state (state persist).
We will learn in turn in this series .

The main components of RecoilJS

Atom

Recoil stores data in units called atoms , React components can access the data contained in the atom and change the value of the data. The atom requires two parameters, the unique identifier ( unique key ) and the default value of the data.

RecoilRoot

To be able to use the recoil, the application needs to be surrounded by a component called RecoilRoot, we will learn more about this API than later, firstly on understanding it as Provider in Redux, and do not need to pass in store at all.

Selectors

Selectors return calculated data (similar to the reselect library in the redux ecosystem). If you have not used reselect yet , we will learn the concept of computational data through the following example.
The selectors takes two parameters, the unique identifier and the get function returns the calculated data.

Hooks

The component will interact with the data through the hooks provided by recoil , we will learn more about that later.

First todo application

The rough theory is enough, let’s try out the recoil with the basic todo app :

Install apps

Use create-react-app to create react application and install more recoil library

then

Our directory structure will be as follows

Initialize the component root

We will create an App component then place it in RecoilRoot as follows:

Data initialization

As mentioned before, we will save data by atoms , assuming we have a data list of todo , which is initialized by atom as follows:
state.js

Here I have declared the state key with a constant for easy management, because note that the key of each atom must be unique. Initializing data is as simple as that, nothing complicated right?

Render data to component

Oke, we have initialized the data, the first basic thing is how the component can receive that data, in redux , we use the connect function with the two classic parameters mapStateToProps and matchDispatchToProps. many generations dev exposure to Redux (joked that, but I used a lot Redux and Redux still enjoyed then, in addition React-Redux also replace the function of hooks connect it).
As I said above, we will use it all by hooks . Let’s start with the first hook in TodoList.jsx :

It is quite easy, import the state and just need to use a hook to get the value of the state . It is easily understood that useRecoilValue provides the ability to access an atom ‘s data and use it in the component .

Create a new todo

After doing a simple job of getting data and rendering , we move on to the next job, which is to create a new todo , which will require changing the state ‘s value. Made in TodoForm :

We use the next hook provided by recoil , which allows us to receive functions that change the value of data in the atom . This function accepts a callback parameter is the present value (before the change) of the state, and returns the new value of that state. Here we see the TodoForm component does not need to render the value of todoListState but only needs to change it, so we use useSetRecoilState instead of useRecoilValue .
If the component needs to do both, render and change the state , we don’t need to use both hooks at the same time, but recoil already provides a hook named useRecoilState , which returns both todoList and the setTodoList function with the same syntax as after:

Update Status of created tasks.

Expanding a bit of the application, we will add events, when clicking on a TodoItem , it will mark as completed, similarly, we will use useSetRecoilState as above:

Add a little bit of css and check the result

A few initial remarks

The state initialization is quite concise and relatively similar to React ‘s useState , the difference is that the state can be accessed anywhere within RecoilRoot . The interaction between component and state is really simple, I haven’t had any trouble with recoil ‘s syntax yet because it looks pretty clear and easy to understand. But this is just a simple todo list , we need to test the ability of recoil for larger applications, and go deeper into other parts like async and persist processing to see whether recoil Is it an alternative to redux or mobx ?

Refer to recoiljs documentation
Demo code in the article: https://github.com/cuongnh-1139/recoil-demo