This course has been updated! We now recommend you take the State Machines in JavaScript with XState, v2 course.

Check out a free preview of the full State Machines in JavaScript with XState course:
The "Guarded Transitions Solution" Lesson is part of the full, State Machines in JavaScript with XState course featured in this preview video. Here's what you'd learn in this lesson:

David live codes the solution to the guarded transitions exercise.

Get Unlimited Access Now

Transcript from the "Guarded Transitions Solution" Lesson

>> Last time we talked, we were on exercise six, which was about guarded transitions. Now, let's actually tackle this exercise, we have to do a couple of things. Let's go ahead and get started here. Okay, all right, so we want to not let the mouse down transition happen unless there's less than five tracks.

[00:00:27] So we want to limit the number of drags that the user is doing. So to do that, we could add a conditioned to this transition, which will make it the car that transition. So we could say context event, and if this condition returns true, that means that this transition is allowed to happen.

[00:00:49] It doesn't mean that it will happen, it means that it's allowed to happen. So in this case, we want to return context.drags is less than 5. Now just to test that this is true, let's return false over here just to see what happens. So when we return false over here, you'll see that we're not allowed to drag at all.

[00:01:17] So we're not allowed to go from that idle state to that dragging state. Let's get rid of that, okay. Now we're allowed to drag however many times we want, and we could see the drag counter is being kept track of up here, but we're not updating the number of drags yet.

[00:01:38] So we need to do that over here on entry. So we'll say entry and this is going to be an action. So we take context and an event and we're going to say, whenever we enter the state we want to increment the drags count. So this sounds like an assign action to me.

[00:02:01] We are going to assign drags to, we only need the context here, we can say context.drags + 1 and return that, okay. At the bottom here, we're keeping track of the drags directly on the elements, so that we could display it on that top left corner that you saw.

[00:02:25] So when we go here, we'll see okay, we dragged once, you drag twice, three times, four times, five times and now we can't drag anymore. So there you go. Hopefully that made sense and now let's actually extract these out. So we could say, let's have a new action here.

[00:02:53] const countDrags, and we could move this assign action. Say that that's countDrags over to entry. We could do the same thing over here. We could say that this condition should be NotMaxDrags. I'm terrible with naming things, but that's okay. const notMaxDrags and we should see that it works exactly the same.

[00:03:29] After five drags, we can't do any more drags. Now, conditionals which make up the guards for the guard at transitions, these are configurable in the very bottom here. So we could say guards and we will have notMaxDrags. We will right now it's just the same as notMaxDrags. But if you want to test this, you could easily override this and say that this is true and this way it's always going to let you drag.

[00:04:08] It will refresh, maybe not, okay. So, if that was a string, there we go. That's going to allow you to configure it so that you could drag as many times as you want or you could test it and say, let's assume that this is always false. And now you could never drag.

[00:04:34] So, this is what guarded transitions enable or rather disable you from doing is choosing the transition when that happens. And additional points that I want to make about guarded transitions is that when you have a garden transition, you recognize that this transition is one that might not be able to be taken.

[00:04:58] For example, if notMaxDrags is false, then we have no transition to do. But let's say that we wants to define another state. So we want to say this is, let's call it draggedout. Like we've dragged this out for too long, so this element is no longer able to be dragged.

[00:05:20] And just for now, we could give this a final state. This does nothing but it's a really good indicator of saying, hey, we've reached our final state and nothing can happen from here anymore. What you could do here is you could specify this transition on the mouse down event as an array.

[00:05:41] So, what this means, when we specify more than one transition, so we could say target dragged out is that if the first transition in the array is not taken, then we keep going down. So we checked this transition, we see, can we take this transition. If so, then we will take it.

[00:06:05] And so now let's see how that looks. So right now we are dragged out by default and that's because we're specifying that as a string which is defined down here. So let's go ahead and undo that and now when we drag five times, It's going to go to the dragged out state, as you see over here.

[00:06:29] And in that state we're no longer allowed to drag anyway because it's a final state, nothing else can happen in it.