Guarded Transitions Exercise

[00:00:00]
>> In this exercise, we're going to be adding a few guarded transitions. And so, these guarded transitions are going to ensure that we go to the right states, and or perform the right actions only if the conditions are met. The simplest one to start with is going to be this volume over here.

[00:00:21]
So we want to make sure that when we send a VOLUME event, which isn't in the UI, but you could send it directly to the service, just via the console, we want to make sure that the volume is only between zero and 10. And so you could add a guard to do that.

[00:00:38]
Another guard that we want to add is a TOGGLE. And so, this light.toggle is for, I'll just go over here, guards. The light.5oggle is for this heart ,so this is for disliking but we want to be able to send a light.toggle event from this heart that will either like or unlike it, depending on which one is clicked.

[00:01:07]
If we go back to our main js, I just want to show you that transitions can also be in the rate too. So if this transition, the condition for it is not met, then we could fall through and choose a different transition. So we could say, target, Let's just having an error state, so error.

[00:01:34]
And then let me just show you how these works real quick. Let's move the counts below 100. And so when we skip, now we're in the error state because that condition or that guarded transition falls through and it picks the next one, since this one wasn't met. And these are going to be picked in the order that you specify.

[00:02:00]
So in the guards challenge, we are going to be doing the exact same thing here for 'LIKE.TOGGLE'. Now there's one more thing to explain for this exercise and that's something called an always transition, or it's called either an eventless or an always transition. We're gonna call it an eventless transition, but it's specified with always, sorry for the confusion.

[00:02:22]
And so, an eventless transition is a transition that is immediately taken when the condition is true. So it doesn't need an event to activate, it's just something that whenever something causes the state to change it's going to be taken if the condition is met. So, for instance, instead of this skip over here, let's say that I have an always.

[00:02:54]
And I'm always going to, if the context.count is greater than 100, then I'm going to go to the success states. So notice, this is in the loading state, and this transition will now only always be taken if something causes the state to change or like when we initially entered the state and this condition is true.

[00:03:21]
So, right now, I'm just going to put a success here. All right, so right now, it stays in the loading state, because that eventless transition specified via always is not taken. So now, if I change this to 101, now you're going to see that it immediately goes to the success state.

[00:03:42]
And so that's why eventless transitions are useful, because they don't require events to be activated. They're just automatically taken when some condition is true. So you're going to be using that in this exercise to go to the pause state whenever the elapsed value is greater than the duration.