Using a Machine Object

[00:00:00]
>> Now I know that this switch statement could be a little bit unruly and sort of just a lot of typing. So that's why I like using a machine object instead. And this is the same technique that if you saw the first workshop, this is going to be exactly the same thing.

[00:00:16]
So if we say const machine =, actually we'll put this on the outside. So let's have oops, const alarmMachine, and this is just going to be a plain object. We're not using X State yet, but this is going to look very similar to X State. Let's put in initial property of inactive and let's have some states.

[00:00:43]
So we're gonna have inactive, pending, and active. And then in each one of these states, we could sort of just define what should happen when in events arrives. So we have toggle, and we're going to say on toggle, we're going to go to pending. On success, we're going to go to active.

[00:01:10]
And on active, when we toggle we go back to inactive. And we also wants to add toggle that goes back to inactive. So we have our full machine here. And honestly, this looks a lot cleaner than having the switch statement. And again, this isn't some sort of API.

[00:01:28]
It's just a plain JavaScript object. You could represent this as JSON, parse it, all sorts of cool things with it. And so this could actually replace our alarmReducer right over here. So I'm going to just comment this out. I'm going to say nextState = the current state of the machine, so machine.states[states].

[00:01:54]
And then we're going to, what did I call this, alarmMachine, so alarmMachine.states[states]. And then we're going to do .on and get the event.type. Now, if a success event happens in one of these states, obviously that's going to be undefined. So we want to default to the current state.

[00:02:18]
And then we just return the nextState. So as you can see a dramatic reduction in code over here, there's really almost nothing to see. And that's just because we're just going through that object and determining what the next state should be given the events and the current state.

[00:02:40]
So let's go ahead and see if that works and we have successfully replaced our reducer or our switch statement. So let's see, we click here after two seconds goes to active, after two seconds it goes to active. Let's try canceling, cancel, okay? So our logic works here. And yeah, we have a machine.

[00:03:09]
So that was basically just how to convert your logic into essentially what is a state machine. And you saw that there's many ways of creating a state machine. If you prefer switch statements, you can use those in alarm reducer. If you prefer objects like I do, then you could do the same thing over here.

[00:03:30]
It's actually a lot cleaner. And what's cool about this too is that you could copy and paste this and use it in the visualization tools such as xstate.js.org/vis. Spoiler alert, this is the old visualizer. There is a new one that I'll show you. And inside machine you could copy and paste that exact same machine code, click Update, and you're able to visualize what the machine will look like.

[00:03:59]
Now remember, we're not using X State yet, but we're using that exact same object structure, which is going to be what X State actually uses for its API. And then you could go through each of the events and understand the complete flow of how your components should work.

[00:04:17]
So that's what I love about state machines is it's a primarily visual way of modeling logic. I'm a very visual person. I know a lot of you might be as well. So that's what I really like about state machines.