Check out a free preview of the full State Machines in JavaScript with XState, v2 course

The "Compound States Exercise" Lesson is part of the full, State Machines in JavaScript with XState, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to refactor the paused and playing states to be children of the ready state.


Transcript from the "Compound States Exercise" Lesson

>> In this exercise, we want to do pretty much what we did over here and group the playing and the paused states in the ready state. And we're gonna see why this is useful in future exercises. But right now it's just to get used to that grouping states into parents states and refactoring so that they're children of that parent state.

We're gonna call the parent state the ready state, and we're gonna specify the initial state, which could be either paused or playing depending on what kind of logic you want to represent. I think at the beginning, we said that the song immediately plays. So if you want the initial state to be playing, then you could go ahead and do that.

Also, another thing to keep in mind too is that when we have transitions between sibling states, like playing and paused, we could specify the target as the key. However, when we have a transition that goes directly from one child state to another potentially unrelated state. I guess you could call this an uncle or an aunt state, because it's not directly the parent.

Then we have to give this an ID so that we could sort of transcend these barriers and specify the state node from any arbitrary location. And so that's what we're doing over here. We add this # and we specify the ID over here. That's already done for you.

So your only task in this exercise is to group the paused and playing states in a parent's ready state.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now