Hierarchical States

[00:00:00]
>> Okay, so let's talk about hierarchical states now. In the first workshop we demonstrated some uses for hierarchical states and we could definitely use those in our timer app as well. Just looking at this, we have three states we have idle, running and paused and those are the current states of our timer so far.

[00:00:27]
However, we might want to change things such as having an overtime state so, if we go back to the complete application. Let's make this three seconds. We want our components to basically have the same behavior in which it's still accepting tic events and it's still counting down when we're in overtime just because that's how the Android timer works.

[00:00:56]
In order to do that, we need to exhibit this over time state as being a child of the running state as well because we're sharing behaviour between those two states. So over here in running, just gonna, it's attached. I'm going to make just an overall running state and we could have two, two child states over here, we'll call this normal And we could also have This one which is called overtime.

[00:01:43]
And so of course we go from normal to overtime when we would normally go to the expired state, and so we could start on the normal state. So what this means, this diagram right here what it means is that basically when we're in the running states or when we enter the running state, we also enter the normal state, which is the child of that running states.

[00:02:13]
And we're in both of these states at the same time, but these could be thought of as basically two separate states. This is running dot normal, and this is running dot over time. And then we could transition and do all that. So let me show you an example in the scratch up real quick.

[00:02:38]
We have our same alarm machine so Let's just go over here. And let's say that we want to express this active state as both being like a normal and a different state. The way that we would do these nested states is, since all of these are objects, we could basically compose the same type of object.

[00:03:12]
So we could have initial, normal, and then we could have states over here such as normal and we might go into a different state. It looks good state so like after five seconds it'll go to or after half a second it goes to this looks good state. So what's happening here is our alarm is going to work the same way once it goes to the active state, but it's not actually going to be in just the active state anymore.

[00:03:56]
It's gonna be in this active and then active normal you just saw there real quick and then active, looks good. So you could think about using this in sort of an animation where once you activate it after a second, it turns green or it fades out or fades in or something like that.

[00:04:15]
You see how it goes from active dot normal to active that looks good so this means that it's in both the active and the active dot looks good states at the same time. That's what hierarchical states are and we go more in depth in this in the first front end masters state workshop.

[00:04:38]
Are there any questions about hierarchical states before we go to the exercise?
>> I guess you could break it up so you could import that state that's in the hierarchy, just so you don't end up with like some massive state like just in terms of being able to absorb it a little more bite size.

[00:04:57]
>> The question was about just being able to, if you do have hierarchical states it making sense to just have this entire thing be, imported from somewhere else, you could definitely do that. But honestly, once it gets to the point of your machine getting too big, then it might make sense to separate it into smaller machines instead of just trying to create a very huge hierarchy of states.

[00:05:26]
So we'll talk about that in the final lesson. But you could definitely do that. It's just a JavaScript object at the end of the day.