Creating a Loading State

[00:00:00]
>> We talked about faking an API out. So essentially we create our fake API called pingInventory, and then in our action, we're pinging that specific inventory. And then we're calling context.commit on a specific mutation. Of course, the difference from what we talked about before and showed earlier was that we're passing specific data to a mutation.

[00:00:21]
So far we haven't done this, we just assumed that we were gonna do something. But when you're fetching an API, you care about the result and you want to propagate that result to state perhaps. And so here, what we'll do is we're passing that data down to the mutation, and we call this a payload.

[00:00:37]
So contacts.commit takes in the name of the mutation as well as a payload, which is the specific piece of data that you want your mutation to take note of. And so we'll look at what the mutation looks like, just so you have a sense of what that means.

[00:00:54]
So here, we have our contacts.commit, so our specific mutation is called stock items. And then we pass an inventory.stock, which is the specific data property from the fetch call that we want our mutation to take note of. And so again, like in this particular contrived example, inventory.stock is 40, so it's a number.

[00:01:17]
And so in the mutation itself, we are creating that specific name of the mutation, so it's called stockItems, it takes in a state and a payload. So previously, we only talked about state, but now we want to look at a payload as well. So it states, payload, there's no comma there, there should be.

[00:01:35]
And then we are updating the supplied based on that payload because the payload is telling us what the defaults should be. Previously, this was we hard coded it. Of course, it's fairly hard coded, but we are calling from an API and grabbing that data. And so state.supply = payload is just setting the specific data property, in this case supply to the payload that we got from our database call.

[00:02:00]
And then again, if you look at the component down on the bottom, you'll see that nothing has changed. We're still calling the specific supply item, and that is automatically getting changed the moment the mutation happens. So we're not doing anything different, again, we're dispatching and so on. Nothing much changes from the component level, the only thing that we changed is the action and the mutation.

[00:02:24]
So I wanted to take a look at this idea of a loading state. So we talked a little bit about asynchronous and synchronous actions, it might be clear from the store itself but not necessarily from the front end. And sometimes you might want to notify the front end when something's asynchronous because it's kind of frustrating when you click a button and nothing happens.

[00:02:44]
And even though something's happening in the back end, if you're not telling the user what's happening, they might click the button multiple times. They might decrement it more than they want to, they might get more items than they actually asked for and so on. Which might not be a problem but it can be in certain instances.

[00:03:01]
So what we'll do is we'll create a new state. I'm gonna call the state isRestocking, so it's just a concept of whether or not it is in the state of being restocked. I create a default state called isRestocking false, so the idea is that you're not always restocking, like in a default normal state is restocking is false.

[00:03:24]
And it only gets changed when the restocking action is happening, so when that asynchronous action is happening. So what we'll do is we are essentially fetching from the inventory. So whenever we fetch from the inventory, we want to tell the user like. Hey, don't worry about it, we're actually doing this thing, We are in the midst of restocking, so don't worry.

[00:03:47]
And then we want to change that also, because when restocking is done, we don't want the user to just be in a constant loading state, we want them to know that's something has happened. And so we need to change it appropriately, and so we can do that really easily within asynchronous action.

[00:04:05]
Because in this case, pingInventory is a sync, which means that we know exactly the sequence in which things happen. So what we'll do is that on initial right before we're even pinging the specific API, we'll change our restocking to true. So that means that it's in the state of being restocked, so the action is about to happen, so we'll pass true to the specific isRestocking.

[00:04:32]
And then within async, you can also do a finally, you can chain finally, which is sort of the end of the entire method. So at the end of this asynchronous action, do this as a final action to sort of like tear down anything else you need. So in this case, the final action when everything has completed is to change isRestocking back to false because you don't want it to be true forever.

[00:04:59]
So we will do a context.commit there as well. So we're committing twice, we're committing once at the beginning right before we actually make that fetch and at the end when we are done with fetching, and we got everything we needed. So you see that happening in both instances, there's a context.commit isRestocking and isRestocking again.

[00:05:20]
And here it becomes clear why exactly you might wanna pass a payload, obviously, it's contrived, because we're not grabbing anything from anywhere. But here we want to make sure that we're passing in true and false appropriately, so that the store knows exactly how to handle that particular state.

[00:05:37]
And so what we can do is we can then create a mutation that does something very similar to stock items that I showed you earlier. Where we are essentially setting that specific state property so isRestocking to that payload, and the payload will be a Boolean, so true or false.

[00:05:53]
So is restocking will always be true or false depending on whatever gets passed to it. And then from the front end, we can hook that in quite easily with a computed property. So the computed property would be called isRestocking. And then we'll just do this.$store.state.the name of that particular property or that state, which is isRestocking.

[00:06:15]
And so the component is then hooked up to the store, so as things are mutating and changing, you'll see that happen quite easily. So this is the way in which you can create a loading state within Vuex.