Actions Solution

[00:00:00]
>> For now, the simplest way to get started with actions is to actually just implement them inline. So for example, on the loaded state, we see that we have to add an action here to assign the song data. And so for now, I'm just going to say actions, and I could specify this as an inline function and to say console.log assigning song data.

[00:00:29]
And so now when I go to actions, it says, assigning song data because that loaded event is being sent at the bottom over here. Now, what we could do is we could serialize this and say that instead, we just want this to be a named action and call it assignSongData.

[00:00:59]
And then we could specify it in withConfig over here. So we could say, assignSongData and just have the same thing, console.log assigning song data. And so same thing should be happening. Just make sure, yep, assigning song data. So now that's something that you could do for the rest of the actions over here.

[00:01:27]
Of course, an entry action is going to be the same format, just with a different property name. We have entry actions, or sorry, not actions, but just playAudio. And so same thing with exit. Instead of play, we have pauseAudio. So we have assigning song data and, We have this playAudio and pauseAudio action.

[00:01:57]
We're not console.logging it yet, but you could see over here that we subscribed and we're logging the state.actions. So we should see that, okay, when the song is loaded, we're doing two actions. We're assigning the song data, and we're playing the audio. So now if I pause, one action is gonna happen, which is that pauseAudio action.

[00:02:21]
And again, you could specify the implementation details inside of the actions over here. Now there was one event that is supposed to cause multiple actions. Let's see how we could do that. So because we specify our actions in an array, we could have something like dislike song. And we could also raise the skip event.

[00:02:49]
Because that's a built-in event, we could just specify it right over here, so raise type SKIP. So let's see what happens if we dislike the song. Look at our array. We have dislikeSong, and we also have pauseAudio. So what exactly happened over there? Well, this skip event takes us to the loading states, and this should actually be .loading.

[00:03:25]
And the loading state, so I'm gonna dislike it again. The loading state goes out of the playing state, so this exit action is gonna happen as well, and so we have pauseAudio. Now, this really highlights the value of why raise events are useful is because if we were to have skip functionality elsewhere, like we have over here in two places, both with the skip event and dislike.

[00:03:57]
Now we don't have to copy and paste that logic. Instead, we could represent it in a more abstract and dry way, which is to say when the dislike event happens, we want to dislike the song and we also want this machine to behave as if a skip event was sent to it.

[00:04:17]
And so it sends itself a skip event, and it does all the logic there. So now it becomes really easy to centralize this skip logic into this transition. And so now you don't have to repeat yourself everywhere. So let's say that we wanted skip to do something else.

[00:04:36]
We want to add actions. We want to add a condition to the skip. We could do it all in here instead of having to copy and paste all of those different things inside the dislike action or the dislike transition as well. I'm not going to do the rest, but you could take a look at main.final.js and see how it's done.

[00:04:58]
One common pattern with XState is that for things that might take multiple objects, you can pass in an array or not. I recommend you be consistent, though, in passing an array just so that it becomes easier for you to add another action if you desire. So looking at the rest of this, it's all pretty much the same thing.

[00:05:27]
We have our actions over here. Again, put them in an array if you'd like, which makes multiple actions easier. We have raise SKIP. And because this is an event without payload, we are representing it just as a string. But if you want to be consistent, you could also just provide the entire event object in there.

[00:05:47]
And then we have a bunch of actions over here, and this is something that we're going to fill in for the most parts in the next exercise.