Context

[00:00:00]
>> When we were talking about modeling in the first lesson, we were describing states or finite states in particular as representing the different behaviors of your application. So what do we do with the extra states that we're used to knowing? So this is sort of the difference between qualitative and quantitative state.

[00:00:20]
Where qualitative means it describes something like a mode or a status of your app that determines the behavior, and then quantitative more describes things that don't really have anything to do directly with the states. For example going back to me as a state machine, I can be either asleep or awake and that determines my behavior.

[00:00:45]
But I could also have different attributes like my height or my age which more or less don't really affect the behavior directly. They're not specific ways of categorizing my behavior, they're just attributes of me. Or my favorite color, my eye color, things like that. So in xstate we represent this so called extended state or state that's not finite state in context.

[00:01:14]
And we could update that context using an assign action creator. And then we can read from the context via state.context. So let's take a look at how this looks in an actual application. I'm going to go back to the machine that I created in our sandbox over here.

[00:01:37]
And the way we add a context, which is our initial data so to speak for the machine, is by specifying the initial context in the context property of the machine. So I could say for example count: 42. And so now in my app when I'm reading and when we're going to actually read the context.

[00:02:10]
When we're reading the state, we could read the state.context and get that data. So over here it's logging count: 42, just because that is exactly what we specified in the state.context. Now what if we want to actually to modify that context. Well, we use an action to do so.

[00:02:30]
So I'm gonna create an assign action here and I'm gonna pull this in from xstate. And then the easiest way to do this is to pass an object in here and the parts of the context that you want to change go in that object over here. So we could say counts, and let's just change this now to a 100.

[00:02:55]
All right, so the count is still 42. But now if I send SUCCESS, which is where that action is defined, the counts changes to 100. Now this is changing it to a static value. You could also change it to a value depending on what the current context and the events that was passed in gives you.

[00:03:18]
So we could increment the counts by saying, just gonna say context.count + 1. And so now we send SUCCESS, the count is 43. Especially if we have events with a payload, we could base it on that events payload as well. So let's say that we have in events.value and so we have to add that payload, so we're just gonna say value 10.

[00:03:53]
So now that's going to take the current context, count, and it's going to add 10 to it. And so now you could see the count is 52. Yeah, so keep in mind that even if you have other properties in here, such as, name David, those aren't affected by this assign action because in this case we're only modifying the counts.

[00:04:20]
So if I add a 10 again, I still have the name of David, and the count is 52.