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

The "Actor Model 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 Instead of an external LOADED event, invoke a promise that returns the song, add an `onDone` transition to assign the song data, and transition to 'ready.hist'. Then invoke the audio callback (use `src: invokeAudio`) so that it can receive events that this machine sends it.

Preview
Close

Transcript from the "Actor Model Exercise" Lesson

[00:00:00]
>> Let's go to our final exercise and this exercise is on actors. So we have two types of actors that we talked about, or rather behaviors which is this callback behavior over here creates fake audio. And this is something that you don't really need to know too much about the implementation details.

[00:00:21]
But this createFakeAudio is gonna create something that feels just like the audio interface that you get with the Web Audio API. So this is just a fake shell for that. And so our invokeAudio is gonna be that callback actor that we talked about. So we have sendBack and receive.

[00:00:42]
And so this actor can receive a play event which causes it to play and it could receive a pause event which causes it to call its pause method. And the audio or at least our fake audio interface also has an addEventListener method with timeUpdate. And so this is useful because it gives us both the current time and the duration of the audio which is both useful information that we could incorporate directly into our state machine.

[00:01:14]
So that's invokeAudio, we also have loadSong which loads a new song every second. So now you'd no longer have to do that loaded event manually. We're gonna be invoking a promise instead. And this promise is pretty simple, you could easily replace this with a fetch function. It's going to give us the data of the song, the title, artist, and the duration after one second.

[00:01:38]
And it's just incrementing the song counter and having a random duration for each song. So we want to do two main things in this machine. In this loading state, we want to invoke that promise. And in onDone, we want to go back to that ready.hyst.state that we defined in the previous lesson.

[00:02:03]
Now in the ready state, this is where we want to invoke the audio callback. Because up until this moment, we've been defining the behavior of playing, paused, and also it going finished. But of course without side effects which is this invoking of the audio callback, our media player really does nothing.

[00:02:26]
So we want it to actually do something and that's where invoking that callback, which is that invokeAudio function, comes into handy. [COUGH] So there is also the two things over here where we want to send events to that invoked audio actor which again is an invoked callback. So this playAudio actually needs to be an action that sends the play events to that playAudio.

[00:03:03]
And the pauseAudio action should be an action that sends the pause event to the audio. And remember you could send an event or create that action object using send and the events and to the invoked ID, or the invoked actor ID.

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