This course has been updated! We now recommend you take the State Machines in JavaScript with XState, v2 course.
Transcript from the "Transient Transitions Solution" Lesson
[00:00:00]
>> For exercise number 7, we wanna do something a little bit different. Right now, the box is draggable by absolutely anyone. What we want to do is we wanna use transient transitions to determine if there's a user. And if there is not a user, then we don't want the box to be draggable because we want to make sure that the user is authorized.
[00:00:23] So what we're going to do is we're going to add a transient transition over here. And this transient transition is going to be in this checkingAuth state. And the purpose of this is to determine whether there's a user or not. If there is a user, then we go immediately to the idle state where the user is allowed to drag.
[00:00:48] And if there isn't a user, then we go to some unauthorized state. Now, in the unauthorized states, you shouldn't be able to drag or do anything. So we're going to be testing that out. So let's first add our transient transition. It's going to be on, and the event is just an empty string.
[00:01:05] And that's to signify that it is a transient transition that is immediately taken once we enter this state. And so we're going to be adding some transitions here, but let's go ahead and add our unauthorized state first, unauthorized. And let's test this out real quick. So if we go and start in the unauthorized state, we should see that now we have this nice sign in button and you're not able to drag it at all.
[00:01:45] So we'll get the same effect if we do an immediate or transient transition to the unauthorized state. So let's change that and change the initial states to checkingAuth just to see that that works. And yeah, we do get to the unauthorized state. All right, but what we wanna do is check that the user is in context and it's not undefined.
[00:02:13] So let's go ahead and add our transient transition. So we're going to check the condition. And remember, each one of the guards takes two arguments just like everything else, context and event. We're not gonna be using the event because we're in the initial state, there is no event.
[00:02:37] But we are going to be using the context to see if there is a context.user. So we could just return !!context.user just to see if the user exists. You could also do context.user is not equal to undefined or something like that. So this is going to be the first transition that's checked.
[00:02:57] And if this condition returns true, then we're going to go to the idle state. So right now, we don't have a user. And we see that we are in the checkingAuth state, which means it is stuck here. So we need to add a default transition. And so we could just say target: 'unauthorized'.
[00:03:19] So now this will go to the unauthorized state because this condition is false. So let's test it out. Let's say that we have a user here, name: 'David'. And we can see that it does go to the idle state and we are able to drag. So how can we dynamically pass this in now that we see that this works?
[00:03:43] Well, let's start with having our user back to undefined. And there's really two ways that you could do this. So if we see where we're using the dragDropMachine down here. You could see that right now it's just going to take those default context values. So the user is going to be undefined.
[00:04:01] And we're not going to be able to track because we're gonna be in the unauthorized state. Now, we could say dragDropMachine.withContext. And currently in XState, you have to basically provide the entire initial context. So what you could do is spread dragDropMachine.initialState.context. And then just provide the user, say, I want this machine to have the initial context and a user, which is not undefined.
[00:04:43] So that is using withContext, and you'll see, since we have a user, we are able to drag. However, there's another way to do this. Instead of just providing a machine, we could have what's called a machine creator. And this is just normal JavaScript. It's not something that's a feature of XState.
[00:05:03] It's just a pattern that you could use. So instead of dragDropMachine, I'm gonna call this createDragDropMachine. And so instead of just providing the machine, going to say user. And then we can inject that user directly into here. So this is a function that takes in a user and returns a machine.
[00:05:26] So now, instead of dragDropMachine.withContext, I could just say, createDragDropMachine with my user, name: 'David'. And so we'll see that this now works.