Composing Vuex Actions Practice

[00:00:00]
>> Something that's really useful within Vuex is the ability to dispatch. So in the example we were looking at and we wanted to check the machine condition before we actually restart the machine itself. And so, this is essentially trying to take one action and calling another action and then making a commit or committing a mutation on the condition that the dispatched action returns successful.

[00:00:31]
So for our first exercise, we're going to dive into how exactly we're going to dispatch a call. So the fetch from inventory action will dispatch a call to check the machine state, and then on successful check, it will then restock the machine itself. And so with this, we'll dive into what that looks like specifically.

[00:00:56]
So in fetchFromInventory, what we need to do first. Because fetchFromInventory is going to do a dispatch. So I'm going to specifically grab the dispatch method from my context. And then from that I'm going to dispatch a action, in this case, it's called check machine state. And then I am going to onsuccess.

[00:01:29]
So this is assuming, I think check machine states always returns resolve. So assuming it does return, what I wanna do is I want to call a restock commit. So if I go down here, I'm going to call stock items. So what I will do now is I will also grab a commit because I care about that.

[00:02:03]
And on success I'm going to commit restock items, and I don't believe restock items takes a pay load at the moment. Yes, so this is the way in which I can dispatch it really easily, so I chained some actions and so on. And so, one of the other things that I can do is I can also change specific attributes or specific qualities.

[00:02:34]
So if I look at the state, there is a state called isCheckingMachine. And isCheckingMachine has a mutation that updates it as well. And so, what I wanna do is I wanna make sure that I update the machine state in the event that it is being checked. So if I look here in my check machine state, that's exactly what's happening here.

[00:02:57]
And then of course the restock as well needs to follow suit. So fetchFromInventory is essentially dispatching a check machine state, and then onsuccess, it commits the restock. So what we'll do is we'll dispatch, and then onsuccess we are also going to commit the isRestocking to true, so we'll go to isRestocking, so.

[00:03:35]
Commit isRestocking, I think it was capital. And then we can do it from there. One thing to note also is that, this restocking generally calls in API. So this is fine and all but we want this to also be asynchronous. So what we'll do is we have async function here called pingInventory, so we're gonna uncomment that.

[00:04:18]
We still want that, so we'll do pingInventory like so. I don't believe it takes in an item, so I think the item by default is chips. So we might wanna do chips like so. And then on success, we will call this particular restock, here. And then we also wanna make sure we're changing the state.

[00:04:51]
So isRestocking is now false because the item has been restocked, and then above here is when we are doing isRestocking to true. So essentially, what is happening here is I'm dispatching a check machine state. When the machine state is successful, it is then in the isRestocking state, it fetches from this particular API.

[00:05:19]
On successful fetch, it will change isRestocking to false cuz it's no longer stocking. And then it will change, it will commit the mutation to actually change that itself. And so that is in effect, how the things hook up within it and how you can dispatch actions and then call API's on success and fail.