Creating a Simple State Machine

[00:00:00]
>> All right, so let's control this a little bit better with some JavaScript, just the same example over here. So we're going to be adding a script over here. And remember, we put the data state attribute on the app element. So what we could do is just have a way of just toggling that from JavaScript itself.

[00:00:26]
So first, like we showed before, I'm gonna grab that app element, document.querySelector, and we're gonna grab the app. And then what I want to do is this button, so let's grab the button as well, const button = document.querySelector, well, just the same button. We're going to add an event listener so that when you click the button, we change the data states of the app.

[00:00:59]
So button, call this buttonEl, .addEventListener, 'click'. And we are going to say appEl.dataset.state = 'loading'. Okay, so now let's actually make this even more prominent. When this data state equals loading, let's just change the background to orange. So I'm just gonna say bg, let's call this, well, first, it will be white, and then we want it to be orange.

[00:01:41]
So now for the entire app, let's just say background bg. Okay, so right now it's loading just because the data state is already loading. So if we remove that, Then we have a plain app. And when we click the button, now it changes to loading. So we could toggle between these, and so we could read that dataset state and say if the dataset.state is already loading, then make it success, otherwise, keep it as loading.

[00:02:26]
So now it's going to basically toggle back and forth between loading, success, loading, success, etc. Now, there's other techniques for how you could transition between states. One of my favorite techniques is by using an object, so I could just say const machine. And this is related to my other workshops on state machines, but you could do this without using any libraries.

[00:02:54]
So we could say machine, we have states, loading, success, and initial. This is just a plain object. And so we could say that we're starting in the loading state, and so on: { CLICK: 'success'}, and in the success state on CLICK, we go to 'loading'. And so now instead of doing this, especially when your logic gets a lot more complex, we could just say read whatever the current state is and figure out, using this object, what the next state should be.

[00:03:31]
So we could say const currentState = appEl.dataset.state. And so the next state should be the machine.states, and so we're going to look for what the current state is, so just do currentState. And then .on, and then we're just gonna say this is a CLICK. And if that doesn't exist, then just stay with the current state.

[00:04:05]
And so now that is going to allow us to just use that logic and set the state from there. Now, you don't have to do all this, but it does make it a lot easier to visualize exactly how states can change in your app. So let's see, we have a little error, cannot read on.

[00:04:29]
Okay, so we want to get the current state, so that's gonna be that or the initial state. Okay, so yeah, now we're going back and forth between the three. And so we could even, let's just have a start state. And then on CLICK, we're gonna go to loading.

[00:04:57]
So it's going to start in the start state, and when you click, it goes to loading, and then when you click again, it's gonna go to success, and then back and forth between loading and success. And again, going back to data state attributes, we could change the background to let's say green, make it a nicer green, so one of these greens, on the success state.

[00:05:26]
So now, when we reload, we're toggling back and forth between each of those states, we just have to set the initial state to start, And there we go.