Context Solution

[00:00:00]
>> So let's talk about adding context into our state machine and updating that context using the Assign Action Creator. So the first thing we want to do is add the initial context. And of course we don't know what the title is. We're just going to keep it undefined.

[00:00:16]
So title undefined are this undefined and duration zero, lapsed zero. So you could set these to whatever initial values make sense for your application. Like status right now it's just unliked and volume we'll just set it to a default level of 5. So now we actually want to modify this data.

[00:00:42]
So just for example in the loaded action we have this assigned song data. So if we go here and we assume that the event looks like this with loaded, we see that we have three things that we could pull from the events that we could assign to context, the title, the artist and the duration.

[00:01:00]
So Our assign function is going to take both the context and the event. So over here we could just read event.title. And then we could do the same thing with artists and duration. And then we also wanna reset the elapsed and the like status values, where this is gonna be unliked.

[00:01:31]
All right, so over here we have an example of these values being sent directly to the service. And so if we go over here, we see now that we have, actually nothing quite loaded yet. So Let's check in just to make sure that all right, yeah, we're on main js.

[00:01:55]
And we're setting that loaded event. That loaded event is going to assign all of that song data. Let's see. And so, when you're debugging too you could also just add console.log here like I like to do. [LAUGH] And yeah so, Yeah it says here and so, it should be assigning that song data.

[00:02:26]
So let's just make sure it's getting the right thing. You could also log the context of the events context of events just making sure we're sending the right event over. So the events is loaded. Aha, yeah so this data is gonna be in the events.data. And that's just because of how our event is structured.

[00:02:46]
And so I saw that just by console.logging, and looking at the events and noticing all this stuff is inside data. And that's gonna be important for later too when we start talking about invocations. So don't make the same mistake I did yeah. And so now we have the song title, the song artists, the duration loading or the duration there and while this is actually a combination of duration and elapsed.

[00:03:12]
And you could see down here that we're actually setting like for example, the scrubber input value to the elapsed time and we're also setting the inner HTML of this elapsed outputs too. In this case we're doing elapsed minus duration just because that's a nice convenient way to combine to combine both of those.

[00:03:34]
But yeah, you can see that we are reading from context and putting it directly on the screen. And so you're essentially going to be doing this for all of the actions. And so if you got through a few of these, hopefully at least the first one then you pretty much have the hang of it.

[00:03:53]
Because they're all pretty much the same technique. And so when we go to main.final and use that in our application, now you see that we have the like status working. So if you click here that heart should show or the dislike status, and that's going to actually change to the next song too.

[00:04:14]
And it's going to be loading which is why those buttons disappeared. But yeah, so all of that is working so far. And yeah, so you should be able to see data on here, shown from the context. The question was will there be time in the course just talking about updating X dates context with immer.

[00:04:35]
So one of the other ways that you could assign context is by passing in a function directly. And this function takes the context and the events and it sort of acts like a mini reducer. And so you could return some sort of updated context over here. Now, because you could do this, you could use immer's produce in order to do the same thing.

[00:05:00]
This is an exercise left to the reader though. There's also an x state immer package that I recommend you take a look at. Which has this built in for you but it is pretty straightforward to use the produce function from immer directly in the assign function. And you can even do it with the object syntax over here.

[00:05:19]
So if I have like title or just something else I could use immer. So I could use produce right over here. So that's just something to keep in mind if you want to use immer with X date.