State Modeling in React with XState

Parameterizing Actions Exercise

State Modeling in React with XState

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

The "Parameterizing Actions 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 move the actions created with the assign() method to parameterized actions.


Transcript from the "Parameterizing Actions Exercise" Lesson

>> So, let's get onto the next exercise, which is exercise number three, this should be pretty simple exercise. What we're going to be doing is we're going to be using the actions that we created in exercise two, which you'll see are already in the machine over here. And we're going to be parameterizing them, so basically moving them out, giving them names such as tick, add minute, and resets.

And if you want, you could add them to the actions over here, but that's optional. So in general, just moving this and this entry, we're gonna be parameterizing both of them and we're also gonna be doing one more thing, we're introducing a new event, which is the tick event.

What that's going to do, is it's going to increments the elapsed time by the interval on every interval, so we're going to be modeling that just for now with use effects. And so, you should also add a use effect over here to send a tick events on every interval.

So basically, you're going to be using set interval to do this, make sure to clean up that interval using clear interval in the cleanup function of the use effect. And every single one of those intervals, you're going to be sending that tick event. And the tick event should increments the elapsed by context done interval.

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