Using XState Solution

[00:00:00]
>> This should hopefully have been an easy exercise. By the way, if you haven't finished the exercises by the time period, don't worry about it. Just look at the final code. And yeah, just watch. So, what we wanna do is we wanna copy the timer machine that we created an exercise zero and let's just copy that over.

[00:00:24]
Here because that's going to be the same timer machine that we're going to use. And so now in the timer, we're gonna be changing this from use reducer before. Now this is going to use machine use the use machine hook from x state react. So we're gonna say const state sent, Equals use machine and we are going to grab that timer machine and that's all we should need over here.

[00:00:56]
I changed States to state dot value for you. That should be a hint that. Now that finite state value exists on the state.value property instead of the state itself. So, over here, we had to change this to if state.value equals paused Then we wanna show the reset button, is data value equals running.

[00:01:21]
We wanna show the pause timer and same thing over here we want to, check if the state value is paused or idle. Then we showed the play button. Now this would be a good points to go and check your logic just to see, if we missed anything. Of course, we haven't.

[00:01:41]
Error over here cannot read property with config undefined. I'm probably using a wrong import. So let's take a look over here. Cuz I'm not actually using the machine. So we wanna create this, sorry, we wants to actually create a, X state machine. So we are gonna say const create, sorry.

[00:02:06]
Import create machine from X date re or X date. And so this is going to go and create machine just like this. And that's actually going to be our timer machine. So trying this again, if we go back, now you'll see that everything is still looking the same.

[00:02:36]
Obviously we need to add those bits of functionality to each of our buttons. So let's go ahead and do that in the timer. So on click, we're going to send toggle. Again, you could send strings, or you could send an object so you could have type toggle on.

[00:02:56]
Either one of those works, if you have a simple event, which is an events that only has a type. And so, we're going to send reset, or I guess should be reset. Over here, send toggle. Same thing over here. Send toggle. So now this is going to work the exact same way that your previous non ex state state machine Worked before.

[00:03:27]
And so you can see it goes to running, we could pause it between running and paused. And when we click Reset, it goes back to idle and the button is going to work the exact same way. And so it really simplifies how things work together. So I'm just gonna, Okay, so one really neat thing about axstate react is that before we were modeling our application, using basically pencil and paper or a whiteboard app such as Excel, draw Using that to map directly to the logic in our application so that our state machine config looks basically like what we drew up.

[00:04:16]
In the future there will be creation tools that allow you to essentially do the same thing as excal Draw and have that be running code. But sometimes we want to visually see that the logic In our time machine is correct as we run the app. And so we could do that using inspect tool called X Date Inspect.

[00:04:36]
So I'll just quickly show you how this works. You don't need to use this for every exercise, but this is just a, a nice tool that you could use to help you if we import Inspect from Inspect, and we inspect I'm going to set iframe to false there's an option for inspecting within an iframe or inspecting in a separate window.

[00:05:03]
So I'm just gonna have it be a separate window, you're going to notice something different and that's that this We do have to install it. So, yarn add xstate/inspect. So we'll go ahead and add that real quick. All right, this should go. Let's now resolve x students
>> You're missing a x in the import.

[00:05:36]
>> Well. I have to talk to the person who owns the stattal organization, because, I would like that. Xstate is fine though. [LAUGH]. All right. Now, you might notice that popups do get blocked, so just make sure to unblock popups for Local host or also code sandbox if you're using the inspect tool within code sandbox.

[00:05:59]
And now it says waiting for connection. So what this is going to do is it's going to visualize your machine if dev tools are set to true. So if you have dev tools true. And we reload this. What's interesting is that playing around with this, actually it actually changes the state over here.

[00:06:24]
So let me. Let me put this side by side, so you should see that when I manipulate the machine here, it actually manipulates it here as well. So if I click toggle again, you could see it going to the state and then it shows you what events are possible from that state.

[00:06:40]
So we could reset it and it goes back to idle click toggle. Running. And you can also see the events in real time over here. And in the sequence diagram over here, the sequence diagram won't be useful unless you have multiple machines that are talking to each other.

[00:06:57]
But the events panel is useful because it shows you each one of the events that are sent to the machine. So that's how you could use the inspect tool to. Visualize your machine in real time. So useful tool. I hope you play around with it. By the end of the year there's gonna be some awesome updates to that.

[00:07:18]
So, yeah, but for now we are just going to turn it off Yeah, it's just nice tool that you could use.