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

The "Parallel 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 to include two parallel regions of player and volume.

Preview
Close

Transcript from the "Parallel States Exercise" Lesson

[00:00:00]
>> So now we're gonna be doing an exercise adding parallel states into our machine. Just like we showed in the diagram right over here, we are gonna be splitting up our entire media state machine into two separate regions. We have the player region and the volume region. And so all of our loading and ready states, those are going to go inside the player region.

[00:00:31]
And then these two states, unmuted and muted, are going to go inside the volume region. So make sure that inside your volume region you're giving it in initial state and you could have it be unmuted because I mean you want to listen to the song. So unmuted makes sense, and you want to move this initial loading transition into that new player region.

[00:01:01]
Go ahead and refactor this day chart. So it has those two player in volume parallel regions. And let's see how it goes.

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