Jotai for State Management 1 exercises

The Atomic Model of State Management with Jotai

Jotai: An Atomic Model State Management Library

Jotai is a state management library that is built on the Atomic Model for state management, and is a bit exotic when compared to the other state managers we've seen over the past decade with React.

Introducing the Atomic Model

In the atomic m

Loading exercise


00:00 Jotai is a state management library that is built on the Atomic model. I think it's fair to say that the Atomic model is a little bit exotic in terms of the normal state management models that we've seen for the past decade as we've been working with React, and the fact that React didn't have good state management built-in,

00:18 has created a flourishing of state managers, and so the Atomic model has come along recently as a new wave of state managers, including Recoil, which is from Meta, and Jotai from our friend Daishi Kato. Now, what makes Jotai unique is all of

00:36 the plugins and all of the extra stuff that you can add onto Jotai. That's how it distinguishes itself from Recoil. Now, if you're like, what is Atomic model in the first place? Well, Atomic model is an interesting way of managing state. So every piece of state is an atom,

00:54 and then you can mutate atoms directly. So we would have a cart atom, we would have a reviews atom, and then for example, if we wanted to have an average rating reviews atom, that could depend on the reviews atom and calculate that value.

01:11 So it's really neat. I liken it to cells in a spreadsheet, and so when you've got cells and those cells in the spreadsheet reference each other in equations, then when you make a change, everything updates. That's how the Atomic model works, and that's really nice.

01:28 So no more dependency arrays or any of that. It automatically calculates all those dependencies for you. Now, initially at Jotai, you would define atoms globally, just as global variables, and you would set and get them globally. Now, you can actually create a store and provide it using a store provider,

01:46 and those stores can have instances of those particular atoms. For example, the cart atom and the reviews atom, and they exist within that store, and you can have multiple stores throughout the hierarchy, or you have one store top of the hierarchy like we're going to do in this one. With the layout, we're going to put the store provider

02:05 there and then our atoms all the way down the tree. Again, this is the single store approach. So you're going to make sure that as you initialize those atoms, you're doing it the right way when it comes to reviews. So as you click along between the various product routes, you set those atoms correctly.

02:24 So the objective of this exercise is to remove the existing React cart context and replace it completely with Jotai for the cart as well as the reviews. If you have any questions, be sure to look in the resources section. Good luck.