State Modeling in React with XState

Eventless Transitions Solution

State Modeling in React with XState

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

The "Eventless Transitions Solution" 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:

David live codes the solution to the Eventless Transitions exercise.


Transcript from the "Eventless Transitions Solution" Lesson

>> All right, so let's take a look at exercise five and use event list transitions. So what we want to do is we want on these running states to have a transition that basically is always taken if it meets a certain condition. So when running, we always want to go to the expired state if the total elapsed time exceeds the duration.

So we could add always over here and say, always go to the expired state on the condition, we'll take the context and we'll say, if context.elapsed is greater or equal to context.duration. The reason we have greater than or equal is because our interval is zero.1 and JavaScript is really weird with decimals.

So make sure you have greater than or equal to otherwise, you'll get into some really weird edge cases. That's a JavaScript thing not an SQL thing ,all right. So this event list transition is going to basically always be checked, but only taken when this condition applies. And you probably noticed that we got rid of our guard in the tick transition too.

So tick is always going to be doing its thing and you're going to see that's actually important for us to do in the next lesson because we do wanna keep listening for those ticks. So yeah, let's check this out and see if our logic works. All right, so 54321 it gonna go to the expired state, which does.

So we know our logic works there.

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