Actions Exercise

[00:00:00]
>> Inside this exercise, we have a pretty fleshed out player machine. And so, this player machine is doing what we did in the previous exercise, but we actually need it to start doing stuff. And we don't know exactly what the implementation details of that stuff is gonna be.

[00:00:19]
So we are just going to put some stub actions in there for now. So on the loaded state, we want to add an action that assigns the song data. And we're gonna cover what that means in the next lesson, but you could just add a console.log there. And then we're going to be adding two actions in the playing state.

[00:00:40]
So whenever the playing state is entered, we need to add an action to play the audio. And so when the state is exited, we want to add the action to pause the audio. Now, we have a few more actions over here, and this is something I wanna talk about too.

[00:00:59]
That you could specify this on object on the routes of the machine. And so what this is going to mean is that these events should be handled, no matter what state you're in, unless they are overwritten by another states. But yeah, so for now, just realize that these events can be handled whether you're in the loading, playing or paused state, and we could customize that behavior later.

[00:01:26]
So in the skip states, we're going to skip the song, so again, just make a dummy action that console logs I'm skipping the song. We also have the option to like or unlike a song. These are also actions that don't go to a specific state, but they're just side effects that are done.

[00:01:45]
And we have a dislike action, now this is actually interesting because if we go to, I think it's testing, you'll notice that, sure, we could like a song, but when we dislike a song, it needs to do two things. It needs to mark the song it's disliked, and also skip to the next song.

[00:02:06]
Because, obviously, if a song is disliked, we want to stop listening to it. So this is where the actions array is going to come in handy. So we also want to add an action to the volume. And if you want, and if you have time, specify the actions in withConfig over here.

[00:02:27]
Now there's one more thing that I want to mention for this exercise. And that's that you can also raise an event. And so this is an example of a built in action in XState. So we're gonna import raise from xstate/lib/actions. And so, this is actually a really useful technique, because when you raise an event, that event is sent to the machine itself.

[00:02:58]
It's like you as a person telling yourself or reminding yourself to do something, same thing with the machine. The machine can tell itself to do something. So, for example, I'm just gonna make a BLAH event over here, this is just a demo, so the names don't really matter.

[00:03:23]
I'm going to raise a success event, so type SUCCESS. And so now, When I'm in loading, and I send, instead of type SUCCESS, I send type BLAH, it's gonna go to loaded. And the reason it goes to loaded is because it's going to execute this transition and one of the actions is to raise this event.

[00:03:49]
So this event is going to be sent to the machine itself, and it's going to now execute this transition. So the raise action creator is really useful.