Composing Vuex Actions Solution

[00:00:00]
>> We stopped at the point and we are working on an exercise where we were working through using dispatch in an action. So, calling another action from an action, which we haven't done before. And so, I'm gonna just check out to my step one branch which has the solution already.

[00:00:22]
I'm gonna run it just because I wanna make sure that it is working. And, meanwhile, we'll go over the specific exercise that we're working through. So, we have an action called fetchFromInventory. It used to take commit, now it takes a dispatch as well, because we are dispatching to a sibling action or an action within all actions.

[00:00:47]
And so, specifically, we want to dispatch the checkMachinesStates action because we're checking to see that the machine state works or not. And of course, this here is not actually like an API or anything. It's just a promise that does a set timeout. But the idea is the same, it's asynchronous.

[00:01:07]
So that's pretty nice, which means that you can use promise-based syntax. And so, what I'm doing is I'm dispatching a check to the machine states and then that will return to me what I need, and then from that I can then do a ping inventory and so on.

[00:01:27]
I believe that was, so I can dispense and then it dispenses. And similarly for restock, which is exactly what we were doing. There's this sense of a restock state. The specific action that we hooked up was the checkMachineStates. So, previously when you click restock, you don't get that checkMachineState.

[00:01:50]
But now you get the sense of checking the machine state before you actually restock. So that's a really nice way of putting two actions together, you can dispatch an action from one action within UX. And so that's pretty much all that UX compose actions is. It's fairly straightforward.

[00:02:10]
But I think it's a really interesting concept to introduce because it allows you to chain actions together, you can sort of make action code fairly sparse and simple. So, every single one of your actions only does one thing instead of doing ten things. So, it makes your actions and your store code a bit more clean with this particular pattern.