State Modeling in React with XState

Hierarchical States Exercise

State Modeling in React with XState

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

The "Hierarchical States 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 hierarchical states to add overtime logic, and use forbidden transitions to adjust the behavior of the nested states.

Preview
Close

Transcript from the "Hierarchical States Exercise" Lesson

[00:00:00]
>> And so in this exercise, we're gonna be looking at hierarchical states and implementing that same overtime logic that we saw in the complete app. So the reason we want that to be in the same running state is because we have this tick event that keeps moving the clock, like that.

[00:00:20]
And obviously, we should have something that stops it. But that's going to be the running.overtime state. So we want two substates of that running state. Normal, which shows the clock is running normal. And overtime, which allows ticks to make updates to it, but could also be reset. And so yeah, we're gonna be doing a few things.

[00:00:46]
So we're going to be moving the event list transition from running to that running.normal child state. And we're going to be making sure that reset happens in that running.overtime state. But we don't want that reset to happen in the running.normal state. So we're gonna be using a forbidden transition to prevent that from happening.

[00:01:14]
Basically, we don't want to be able to press reset while it's running. So we want to forbid that transition. And also, if it's going in overtime, we don't want pausing to do anything or pressing toggle. Obviously, we don't wanna pause and play a timer when it's in overtime.

[00:01:34]
So just make sure that that transition is forbidden as well. And just a quick review on forbidden transitions. The way you forbid a transition is just by, for example, if we wanted to forbid this success transition, we would say SUCCESS: undefined. So we're defining the success transition, but we're saying it's undefined.

[00:01:58]
Nothing should happen with this transition.

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