Check out a free preview of the full State Machines in JavaScript with XState course:
The "Using XState with React" Lesson is part of the full, State Machines in JavaScript with XState course featured in this preview video. Here's what you'd learn in this lesson:

David demonstrates how to refactor React code using XState by using specific hooks and reducers provided by React and linking XState to the framework.

Get Unlimited Access Now

Transcript from the "Using XState with React" Lesson

[00:00:00]
>> So what we're gonna talk about now is using X state with a variety of different libraries. If you look at the documentation, you will see that there's recipes for using it with react, View, RX JS in even Ember now. So, each of these ways has a template and if you go to the homepage, so if you go to github.com/davidkpiano/xstate, You will see each of these templates over here.

[00:00:32] So if you want to incorporate X state into react, here's how you would do it. Go ahead and click the X State Reacts Template. And you will see here, once we zoom in that we have our machine defined just like before. So this is going to say create machine which is going to be the newer syntax of create machine.

[00:01:00] And this is going to work directly in reacts, so if you remember this toggle machine it's just a reducer. So you could even use toggle machine transition as a reducer function if you were using it just as a plane reducer that doesn't emit any effects. But there's also an XState/Reacts package which provides a use machine hook.

[00:01:25] And so this allows you to use this machine you defined directly in react the same way that you would use reducer. And so it provides you two things, currents which represents the current state, in sense which represents a function that allows you to send events back up to the machine.

[00:01:44] For instance, when we click this button, we're gonna be sending the toggle events. And that toggle event is gonna be toggling between inactive and active and whenever we enter active, we are gonna increment the counts by one. Which you could see right there. So that's how you would incorporate it into react.

[00:02:13] Let me go ahead and There's another example that I want to show, okay. And I'm gonna go ahead and sign in for this one. Okay, great. All right, so here's a more advanced example of using X State and powering it with react. Typically, what you would want to do is you would want to separate your machine and the components definition.

[00:02:56] So, I'm going to show you why you would want to do that. Right over here. Here we have a timer machine that models the Android timer. Pretty exactly. And it's a minute timer. So once you click here, it's going to start counting down. And you could do things such as pausing the timer and this is the behavior when it's paused, it just flashes at you.

[00:03:19] You could also reset the timer and it goes back to 60. One other thing you could do when you're in the running state, you could add minutes. So this machine in particular is created with TypeScript, which we're not gonna go into in this workshop. But this machine has nothing to do with React.

[00:03:41] All it's doing is it's defining the behavior for extended data such as the duration, the elapsed in the interval is happening in the machine and what states it could go between in that machine, for example, it's in the running normal state. When we press pause, now it's in the pause state.

[00:04:01] So the interesting thing about this is that because we're defining our machine in a completely pure way, in fact, I could show you this individualization we copy this over here. You can see that this is the schematic for how that timer machine works. So once we toggle we go into the running state.

[00:04:25] We could also add a minute or we could toggle and then we go to the past state. So you could see we go back and forth between normal and paused. Now, one huge advantage of defining your machines this way, and not tying it directly to the framework is that you could even use these machines directly in other frameworks, such as view.

[00:04:50] And so what I did was I took that exact same machine, you can see the timer machine over here. Absolutely no reference to view whatsoever in here. In fact, nothing needed to change with this machine in particular, everything is just the same except with all the typeScript types stripped out because I'm using just JavaScript over here.

[00:05:14] And you could see that this machine is now running exactly the same way but in view.