Middleware

[00:00:00]
>> So, that's enhancers. And as I kind of alluded to before when we were asking and answering questions, was apply middleware creates one enhancer out of a series of a chain of middleware. One of the useful ways to think about this is, enhancers are kind of useful if you wanna change the overall implementation of your store.

[00:00:21]
We have not looked at the Redux Dev Tools, yet. But, I'll give you a little bit of a sneak peek, which is it has a whole bunch of things like the ability to load in state through the dev tools, export the state from the dev tools, dispatch actions, undo, and redo and all these features.

[00:00:34]
So, it's adding a lot of functionality to Redux. And so, it's definitely gonna use an enhancer. However, if its something like, I just wanna modify actions as they come through cuz I wanna do async things, I wanna log them, we use middleware. For instance, we use middleware to log customer behavior to segment or something along those lines.

[00:00:54]
So, like, they're firing these actions, they're visiting this page, will log that to segments, or data dog, or what have you? So you might say, as actions flow through, I wanna do something. Middleware is a really, really great way to modify how dispatching actions works in your application.

[00:01:10]
And, effectively, it is an abstraction over an enhancer, which is a way for just managing actions as they flow through. And apply middleware allows you, out of the box, to compose an entire chain of middleware. Let's go ahead and well look at how that might work for us.

[00:01:31]
So, let's go ahead. We'll get rid of these for now. Actually, we'll keep them cuz we're gonna use them for parts.
>> Why is the enhancer passed through the enhancer, again?
>> So you're matching the same API. My gut says, I was thinking about this earlier, my gut says is probably memorizing it, which is if you've got the same enhancer as last time, we're not passing it through again, right?

[00:01:57]
So we're trying to, if we get the same enhancer, don't pass it through each time. But you wanna make sure you're following the same API. Cuz you could, theoretically, modify the enhancer and replace it, as well. If you want me to come up with a hypothetical use case for why you would ever wanna do that, I cannot.

[00:02:13]
But it is there to do, if you needed to do it. But yeah, I think your god of, I shouldn't do that, is probably a good spiritual thing to listen to. All right, so middleware is just got a slightly different syntax. So, we'll go ahead and we'll say something like, this one, I will make the logMiddleware and you can make the enhancer this time.

[00:02:38]
So, I'll say we'll make some logMiddleware. And middleware is much more common. Like I said, we use it for logging actions to our different data reporting tools. You can use it for all sorts of different things, as well. But let's see, this is more likely that you will almost never write enhancer and you will absolutely, maybe, possibly, with a chance, write some middleware like we definitely have.

[00:03:05]
So it takes a bunch of curried functions because things get passed in at different times. So, we could say store, next, and action. What's the store? Is the actual store that we created, right? Next is, actually, dispatch, cuz each piece of middleware will call the next piece of middleware.

[00:03:23]
Kind of, so, the question I just received, right? Where you can call the next one in an array of middleware. Finally, when you get to the end of the array, then you're dispatching to the reducer. And the cool thing about middleware is, like the enhancers that we just wrote, it gives you the opportunity to do a bunch of things before you hit the reducer.

[00:03:40]
And then also, again, after it leaves the reducer. So, you get to insert yourself at both places there, as well. So, with the logMiddleware, we'll simply say something along the lines of, and you'll see that the syntax is a little bit cleaner. So, we'll say something like console.log.

[00:04:00]
And we'll say old state and we'll say store.getState. And I mean we could log the action too. And we'll pull that down here, one of the const we got before is, we wanna call with the new state. This time, since we're just using the store, is very much before we can call it getstate and it will be the current state of that moment.

[00:04:28]
So, we'll say new sate, and here we'll say Next, and give it the actual action. So, it flows through, right? So, now, we can pass it in there as an enhancer, but it's middleware. So we just have to use the applyMiddleware. Cool and you can see old state and the way we're not really modifying the state here, but you can see it each time.

[00:04:56]
We've got an old state and new state beforehand. So, this is everything happens before you passes through the rest of the middleware and eventually the reducer. And then you get access to it, again, after it's left all of the middleware and the reducer. So, it's a cleaner and simpler syntax for writing those enhancers.

[00:05:14]
So you don't have to make a whole bunch of enhancers compose them. You're just trying to intercept actions. This is super useful. The most famous, yeah, sure, let's go with it. The most famous use case for middleware is a library that is using Redux Toolkit. And very commonly in Redux applications called Redux Thunk.

[00:05:33]
So let's say, hypothetically, you needed to make a Ajax request or a fetch HTTP request. You could dispatch an action, but actions aren't valid. So what could happen was, you get the action here, then you fire the promise or the Ajax request, and then you fire a real action afterwards, right?

[00:05:52]
And that is kind of, normally we use a library called Redux Thunk, but that is effectively how it works. It's just type checking. Like if type of action is actually a function, call the function and pass a dispatch and allow it to then figure out what to, and passes through the rest of it.

[00:06:07]
So that is the most common case for middleware is, anytime you need to change how actions flow through the pipeline, and you don't wanna write an entire enhancer and compose them all together. Middleware is a really, really great way to do that.