Handle Complex State in Jotai with XState using atomWithMachine

Derive Jotai Atom State from Complex State Managed in Xstate 

Share and Isolate XState State using Jotai Provider

Provide XState with Initial Values through Jotai Provider

Initialize a Xstate Machine with Jotai Atom in Atom Pattern

Complex State Management in React with Jotai and XState

We currently have a machine that displays a circle of green. When you click it, it will cycle through green, yellow, and Red.

What if you wanted to pass XState initial values from Jotai, you'll need to use the `initialValues` prop on Jotai Provider and pass a list of pair (atom and value) to it.

To do this we'll refactor the creation of the lightMachine to be a function that accepts an atom as an initial value.

One note to be aware of is that this initial value will only be set when the XState machines instantiate.


https://app.egghead.io/api/v1/lessons/egghead-provide-xstate-with-initial-values-through-jotai-provider/subtitles

Daishi Kato: [0:01] So far, we use createMachine from the xstate library and create a machine statically. Using lightMachine and lightAtom, we build the light component. What we build is a tiny app that displays circles in green, yellow, and red colors. The initial color is green, and if you click the circle, the color changes.

[0:25] What if we want to change the initial color of a circle? Currently, lightMachine defines initial state as green. Let's change this by making it a function. createLightMachine() is a function that takes an initial value as an argument.

[0:43] It then creates a machine with the initial value and returns the created machine. Next, we create a new atom that holds the initial value. initialLightAtom adds an atom for it, and its initial value is green. Finally, we modify lightAtom to use createLightMachine and initialLightAtom that we just defined. Notice, we have the get function in atom with machine.

[1:12] This works just as before. The initial color is green, and it changes with clicking. How can we change the initial value? We use Jotai Provider's initialValue property. initialValues are a list of pairs of atom and its value. In our case, we specify initialLightAtom and its color value.

[1:39] Let's specify yellow for the one and red for the other. You notice double [inaudible] to represent a list of pairs. If you rewrote the app, the circles are not green, but yellow and red. Clicking them changes colors obviously. It works totally as expected.

[2:02] There's one thing to note about this usage. As the name implies, initialLightAtom only works for the initial value. Let's do a small experiment. Create a component called, setInShowLight.

[2:18] It has a button, and clicking it changes the initialLightAtom value to red. We place this component under the first provider. Now, even if we click the button, nothing will change. This is because by the time the button is displayed, the XState machines are already initialized.

[2:42] Let's recap what we did. We defined an atom that holds an initial value. We created a function to create a machine, instead of creating a machine directly. The light atom takes a function to create a machine. Finally, we provide the initial value using Jotai's Provider. Provider is a general feature in Jotai and not specific to XState. It allows to initialize atom values when it first renders.

Provide XState with Initial Values through Jotai Provider

Share this video with your friends

Course

Complex State Management in React with Jotai and XState