State Modeling in React with XState

Eventless Transitions Exercise

State Modeling in React with XState

Check out a free preview of the full State Modeling in React with XState course

The "Eventless Transitions Exercise" Lesson is part of the full, State Modeling in React with XState course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to use eventless transitions to detect when the timer expires and simplify the guard logic.

Preview
Close

Transcript from the "Eventless Transitions Exercise" Lesson

[00:00:00]
>> All right, cool, so let's start with Exercise 5 now. Now we're going to be using eventless transitions to refactor or simplify the guard logic a little bit. We're gonna be doing two things. First, we're going to add an eventless transition in the running state, that would transition to expired as soon as the timer expires.

[00:00:22]
So if you look at the current machine over here, Right now, that tick, it's going to keep ticking and we're going to have the same problem as the previous exercise. So instead, what we want to do is we want to add an eventless transition that always checks. It's basically going to ask hey, did the elapsed time exceed the duration?

[00:00:52]
And so we're no longer gonna have a guard on this tick, instead we're going to have a guard on that eventless transition. So if so, go to the expired state. If not, then basically don't do anything. And also yeah, we're going to be removing that guard from the tick transition and so you'll see how basically that's going to simplify things.

[00:01:17]
Any questions about this exercise before we get started?
>> David, can you explain when the always actions get fired? Is it whenever there's a new event or is it when context changes? Or when do those always actions actually get fired? What's the mechanism?
>> That's a good question.

[00:01:39]
So the question was about when do eventless transitions basically get fired? If you go to the SEXML algorithm, it could be a little bit hairy so we're not going to do that. Instead I'll outline the logic actually over here. I'll be using Excalidraw for this. So let's say that we're in some sort of, what do we call that state?

[00:02:10]
The running state, okay? So we're in the running states and then a tick event happens. What's going to happen is once that event happens, we're going to calculate the next state. In this case, it's still running. But immediately after that, we are going to check the eventless transitions.

[00:02:43]
If there are no eventless transitions to take, then we're done, we're on the running states. So otherwise, if there isn't eventless transition to be taken, then we evaluate that so it might go from running immediately to expired for instance. So in other words, the state is calculated and right after the state is calculated, you check the eventless transitions.

[00:03:09]
>> So what do you mean by right after state being calculated is all actions are done, only after actions are completed?
>> The question was about just clarification around what happens over here. So when the state is calculated, you get a state object, you get the context, the value actions that might happen.

[00:03:34]
And then the eventless transitions are checked and so you could think of it sort of as a while loop. So it's saying while there are still eventless transitions, basically keep trying to transition. So all of this happens synchronously by the way. Does that answer your question?
>> Actually, I was wondering, I was thinking eventless transitions shall be used before the other actions are performed.

[00:04:06]
>> The question was about you want an eventless transition to occur before actions are performed?
>> Right.
>> Okay, so that's a modeling problem. Basically, you want to model a state in which a eventless transition is taken in a state in which the actions are executed. So instead of trying to juggle around the order, guess like, is this gonna happen before this, it's usually better to split it up into different states.

[00:04:34]
So that you could say, execute these actions after taking this eventless transition because those actions might be on the entry of that state.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now