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

The "Context 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 add the initial context for the title, artist, duration, time elapsed, likeStatus, and volume. Students are then instructed to change the actions to assign to context.

Preview
Close

Transcript from the "Context Exercise" Lesson

[00:00:00]
>> So now, we're gonna be jumping to an exercise on context, and so in this exercise we want to do a few things to actually make our our machine a little bit more useful than something that just toggles between play and pause. So we're going to add the initial context first for the song title and artist which could be undefined at first.

[00:00:24]
The total duration of the song which, again, we don't know so it starts at 0 the elapsed value which is how far along we're at the in the song which can be 0, the like status which is a string, and that like status can be either unliked or it could be liked.

[00:00:47]
Oops, liked or it could be disliked. And yeah, there's three different values for that. And then the volume which is a number. So you're going to add that initial context into there. And then we are going to change some of the actions so that they're actually assigning to context.

[00:01:09]
The assigned song data. We're going to assume that it takes an events with type loaded in this data in the payload, and you're going to assign the title, artist duration, and you're going to reset the elastine like status values. Try to see how many of these assign actions you could get to, we're gonna take a short time to do this and if you don't get to all of them that's fine, I just want to get you used to writing these assigned actions.

[00:01:40]
So yeah, in this assign time is another action that's going to be reading directly from the events, just getting you used to setting the initial context and also assigning it via an action. Keep in mind too, that when we render this out, that context is actually read just like we talked about from states.context and is used inside the application to display certain things, and we'll talk about that after we're done with the exercise.

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