Action Plugin Solution

[00:00:00]
>> So, we're gonna modify to use subscribe action in our plugin itself. And so, we're not gonna do anything much besides add it for now. So, what we'll do is I'm just gonna do subscribe action. And it's actually really similar to mutation or what we have above, except it takes in an action and a state now.

[00:00:23]
So, just to show you what that looks like, I'm not doing anything besides. Let's just log in, because I think we haven't really talked much about what to do and why this is useful. So, let's look at what exactly is in there. I'm gonna remove state, cuz I'm not gonna use it for now.

[00:00:53]
Where's the parser might yell at me, cuz it might say. Okay, so currently, I created subscribe action, all it's doing is it's console logging the action type in the payload. And it's useful just because I wanna know like hey, what's happening here? Is it working? So, let's see if it worked.

[00:01:14]
So, I click this button, and then I see that I have action type, and I have an action of payload as well. The action type is service machine, the action payload is undefined view, cuz there is nothing that's being passed to it. Actually, no, this is a mutation.

[00:01:32]
Yeah, potentially because there's nothing being passed to it.. Let's see if my theory's right. The action type is called service machine. So, let's go into Service Machine, and indeed there is no payload associated with it. Because I'm just automatically calling new date and passing it that way. So, the mutation actually has the payload but the action has nothing.

[00:02:01]
So as results, the action is just giving me the payload of undefined. So, that's accurate, and that's exactly what I expected. So, this particular exercise was nothing more than just sort of hooking that up and playing around with it. There's nothing more that I expected to be done here.

[00:02:18]
But we'll go into detail as to like, why this could be useful? So, one thing that is neat about action that's very unique with subscribing to actions and not mutations is that, within subscribe action you have a before and after. So you can see before the action occurs and then after the action occurs.

[00:02:38]
The nice thing about doing it this way is that you can see state changes that happen within the plugin. So again, before is before the dispatch happens, and after it's after the dispatch happens. By default, I believe the before is where your code runs, so it's not after it's before, so it's before the action dispatches.

[00:03:05]
So, why is this useful? Well, one instance in which it can be useful is, let's say, we've been talking about servicing a machine, right? And you might want to check the frequency at which a service a machine is service. Let's say, like compare when it was last service with when it's currently being serviced.

[00:03:22]
And so, in order to make a comparison of previous state and current state, you would need a before and after sort of snapshot. And to do this, a subscribe action is the perfect way in which this is useful. And so, for that for our next exercise, we're going to actually dive into the before, after pieces of subscribe action.

[00:03:43]
And hook it up in such a way that we noticed frequency and calculate frequency. Let's say, the time in which last service occurred from current service. And so, for this I need to check the type of the action. So, I think the action was called Service machine. So, that's the action that we want.

[00:04:08]
So, I'm gonna do action.type = servicemachine, like so. And then, all of the logic sort of lives there. And I wanna bring state back because I'm actually gonna use it. So, I'm gonna bring my state back. And so, what I wanna do next is I want to check to see the I think it's lastServiced is what I want to check for.

[00:04:36]
So, in my state lastServiced is a date object. So, state lastServiced is a date object, so state,lateService.get, I don't know getTime or something, maybe. And then, let's see newDate.getTime -, which will give me the time distance between the two events. Let's check if my code is correct or it's correct.

[00:05:05]
And so, now I can just console.log the time lapse. So, let's say time lapse and then time distance, do have an error? New date is not defined, it's also space area. All right, now I can click the button, and I can see that the time lapse and this is in milliseconds.

[00:05:31]
So, you just divide it by 1,000, and then you'll get like three seconds is the time lapse and so on. And so, obviously, you can try to change like you format it however you want. But the idea remains the same that essentially what I'm doing is I am checking the before and the after.

[00:05:52]
I think what could be useful also is, I didn't even do before did I, silly. Though that would have been really handy, but I didn't do it. So, that was actually neat because that was the thing I'm checking for is by default before, so it's gonna live there anyway.

[00:06:21]
And what I wanna do now is the after. So, we talked about before and after, but I think it's useful to hook those things up. So, I would like to start by looking at the last service as in a way of comparison. So, just seeing how things change before and after the action happens, let's see.

[00:06:43]
So, I'm missing some stuff here. So, I need to get the action as well as the state. I guess I'm not using action, so I'm just gonna get state. And then, I will console log, the states specifically last service. I have an error, I had written it as action and state.

[00:07:07]
So, this works if you're not doing this, but if you are you can't do this anymore. You have to just because it's an object, it has to be before and after, like so, so that that should work. And then, if we run the code, you'll be able to see the, I think it's useful to write before and after.

[00:07:40]
So, we'll see before and then after is undefined. Great, I think cuz you have to pass in. Yeah, I think it has to take in the order, yeah. So, you can't like ignore this because it's ordered. Yeah, it has to be action and state, so my bad. So essentially, what I'm doing is I'm checking the before and after to make sure that there is a difference there and there is indeed a difference.

[00:08:17]
So, if I click the button, you'll see that the before happens at 16:20:14 GMT-05, and the after happens at 16:20:31. Which is about like 16 millisecond or 16 seconds actually in between the two. And so, that is essentially how state changes within the two. Just to show you how you can use plugins in order to grab specific, to spy or look into your store without having to change the store specifically.

[00:08:52]
And so that is Vuex plugins.