Introducing Construct Sturdy UIs with XState

Handle http request state with XState

Invoke an XState Service when Entering a State

Block a State Transition with a Guard

Control Transitions Order with Parallel States

Communicate between State Machines in Different Components

Save Previous States with a History State

Execute Code when Entering and Exiting States using Activities

Construct Sturdy UIs with XState

To match an element from one list with an element in a second list, it doesn’t matter which list is selected first, but the question isn’t answered until both elements have been selected.  We’ll model this concept by keeping the selection status of each list in parallel states of a state machine.

https://app.egghead.io/api/v1/lessons/react-control-transitions-order-with-parallel-states/subtitles

Instructor: [00:00] We're going to add some functionality to our app to be able to match a person with their homeworld. In order to do this, we'll create a matching machine. Let's outline the states first.

[00:12] There'll be an answering state and a submitted state. The submitted state will have its own substates of correct and incorrect. Let's add an evaluating state here with an automatic transition that sends to the correct state if the is correct guard return is true. Otherwise, it'll go to the incorrect state.

[00:46] We'll set the initial state of the submitted state to evaluating and the initial state of the overall machine to answering. Now, answering also has some substates. We need to keep track of the selection value of the top list and the bottom list.

[01:08] Each of this list can be either unselected or selected, but there's something different about top list and bottom list as compared to unselected and selected. In this machine, you cannot be both unselected and selected at the same time. They're mutually exclusive.

[01:29] When we first enter the answering state, the top list is unselected and the bottom list is also unselected. We're essentially in both the top list and bottom list states at the same time. We call this situation a parallel state. We'll set our initial values for the list and let's see what this looks like in the visualizer.

[01:54] You can see that the parallel states have this dash border around them. We're currently in both the top list unselected state and the bottom list unselected state. Let's add some transitions for this machine.

[02:06] We need to set up some context here to keep track of the selected items. We'll track the top selected item and the bottom selected item. When we're in the top unselected state, a select top event should transition us to selected and trigger a set top selected item action. Same thing goes for the bottom list, only, we're selecting bottom and set bottom selected item.

[02:44] Next state also has the concept of a final state. In our case, we want to set these selected states to final and this lets us add an onDone transition to the answering state. The onDone transition is fired as soon as all the substates are in their final state. Let's check this in the visualize one more time.

[03:08] Now we can select the top item and the bottom item and it will automatically transition to the submitted state. Also, if we select the bottom item first and then the top, it will also transition to the submitted state.

[03:22] Now, I'll create some types for this machine. We have the states defined, the events and the context. Let's define the set top selected item and set bottom select [inaudible] actions.

[03:39] We'll set top selected item to the event selected item and the same thing for the bottom selected item. Now let's use the state machine. We'll use the use machine hook and we'll define the is correct guard, or return true if the top selected item has a Homeworld that matches the bottom selected items URL.

[04:10] I've updated the UI here. I've added a button inside of each list item that will send a select event to the matching machine when it's clicked and have a background color to show that it's been selected.

[04:24] I also display a message for the correct answer and for an incorrect answer. Let's see what this looks like. Now, I can select the top item and then the bottom item. Or I can select the bottom item and then the top item.

Control Transitions Order with Parallel States

Share this video with your friends

Course

Construct Sturdy UIs with XState