Week 4: State management in Raven

Last week we discussed on how the core units like space would work in raven. This week we will focus more towards the front end aspects of the application the architecture and how the data flow works in Raven. Raven is built with React and its latest Hooks API. There were a lot of choices when it comes to React applications. The most popular answer for state management would be Redux, But using redux would make it more much complicated and would bring more boilerplate codes in to the application and considering the size of the application it doesn't seem to be a good idea to select Redux. The other popular choice would be use React’s own context API or using the Facebook’s latest state management library recoil. Here is a comparison between them

Context API
The context API is behaving as a common state between components. It’s not made to replace Redux as abusing them will make your code very hard to maintain. In the case of Raven, we are having lists of spaces in the global context as a global variable to avoid a re-render of ALL the spaces in the list every time one is changing, you will have to create one context per space. It is doable, but the debugging will be a nightmare.

Recoil
Recoil is using what is called Atoms to manage the state of each component. They are extremely easy to created and even easier to use as they are using the exact same API than useState. Also, Atoms can be created very easily as they can be identified by ids. Then, easy for you to manage the stage of each component by just adding a dynamic value to the key of each Atom
Lets jump into a code example, let’s have a look about what is an Atom.
An Atom is initialized by calling the function atom in Raven.

High level architecture of React and Recoil

Here, we are declaring the atom spaceState

import { atom } from “recoil”;
export const spaceState = atom({ 
   key: “raven-spaces”, default: []
});

Each atom must have a key which is a unique identifier and a default value
When the atom is declared, we can them just get it with a specific hook

const [space, setSpace] = useRecoilState(spaceState);

And we are ready to use it!

The code related to the raven with recoil is available in the following PR.

12 targets/space front and basic space implementation by TRomesh · Pull Request #13 ·…

So its been 4 weeks now and now it time for First Evaluations so lets see you all next week with some new features.