Enhancers

[00:00:00]
>> So at that point we've got combineReducers, we've got bindActionCreators, we've got compose, we've got createStore. We are down to the last and final method that is on Redux, which is applyMiddleware. Now, good news and bad news. Good news, it's the last one. Bad news is that there's one more thing that we have to learn about as we kinda get comfortable with this.

[00:00:26]
So clear out some of this again for ourselves. So we'll create just a really quick reducer again. This is the simplest valid reducer, is it takes the state of the world, it ignores the action and gives you back the state of the world. It's a very stubborn reducer.

[00:00:49]
So we can go ahead and create a store, With this reducer. We saw that we could have some kind of initial state as the second argument. It also takes one more argument, which we'll see in a second, which is a store enhancer, which is a function. And we'll actually we'll build an enhancer in a second.

[00:01:16]
And you can actually pass it as the second argument as well. The only required argument is the reducer function. Everything else here is optional. And an enhancer is basically if we wanted to add additional functionality to a Redux store. This is a place where we can pass in a function which will get an instance of createStore, allow us to do whatever we want and then pass all the arguments into it.

[00:01:42]
Let's look at a quick diagram here. So we've got createStore, it's got the reducer, it takes the initialState and the enhancer. What the enhancer will take is, first, it's a curried function, it returns a function. It's gonna take the copy of createStore that we're calling and a copy of all of the arguments we handed to it.

[00:02:02]
You can do whatever stuff that you need to do and then actually call createStore. To be clear, generally speaking, you probably won't write a lot of enhancers, right? Because you need a pretty good reason. The Redux DevTools are an enhancer, right? Cuz they are basically wrapping your createStore with all the stuff that hooks it into the Chrome or Firefox DevTools, right?

[00:02:27]
And so that's the use case for an enhancer. The other thing we mentioned was applyMiddlware. The function applyMiddlware creates an enhancer that we'll see in a second. But let's actually look at the at the syntax here, because it's not as scary as it sounds. So I'm gonna write one and then you're gonna write one.

[00:02:49]
And then we will talk about it together as a team. So we can go ahead and let's say we wanna have an enhancer that theoretically takes performance metrics of everything happening in Redux. That seems legitimate, right? So, we could say, we'll call it monitorEnhancer. And that's gonna get a copy of createStore function that we'll be a little call later.

[00:03:21]
And it is also going to get reducer, initialState, and enhancer. Cool and what we'll be able to do, you could go ahead and just immediately return. This is like an enhancer that doesn't do anything. initialState, And we'll call it immediately. But if you wanna do stuff like wrap the reducer in another function that prepares it.

[00:03:59]
So hypothetically, if we want to take a performance benchmark before we call the reducer and then a performance benchmark after we call the reducer, and console log it, we can do that here. And then pass that wrapped reducer to the actual createStore. So we can go ahead and we'll say something like const start, = performance.now(), const end = performance.now().

[00:04:31]
And the diff, We'll Math.round() it. So it'll be the difference between the end time and the start time. I'll even spell const right. And here we'll actually just say, Well, we'll just call the reducer function, because it's just a JavaScript function, right? We'll say state and action. Instead of state, we're gonna say start, down here.

[00:05:11]
Right, we gotta wrap, this hold on. We'll make a reducer, hold on. const, we'll say replacementReducer. Well, we'll say monitoredReducer. And that is gonna take state and action. It will pull all this in. Call the real reducer once we've taken our performance metrics with state and action. And then return the new state.

[00:05:52]
Let's also console log that diff. Great. All right, so we've got that kinda in place. This enhancer doesn't work here cuz it doesn't really exist, so we'll replace it real quick, now that we have one. Let me clear that out. Oop, enhancer is not a function. We gotta pass in our monitoredReducer as well.

[00:06:27]
Where is that other enhancer? This one doesn't exist, so that's fine. All right, I need to quickly change something, I'm calling it inside here, but this is enhancer. And now we'll pass our new monitored enhancer into the real createStore. Perfect. So now we have one in place where we can dispatch some actions.

[00:07:12]
Doesn't really matter, since this reducer doesn't really do anything. And we can see, we'll actually just get rid of the rounding. You can see that now I'm logging the actual time it takes to run through the reducer every time. So this allows you to create reusable plugins effectively for Redux that you can pass in there.

[00:07:37]
And now it'll wrap every single call to the reducer in the performance metrics. So now they just pass this in. Same thing with the Redux DevTools. As we'll see before, you can pass in these enhancers, it will wrap an extended, almost like a plug-in, architecture, for Redux, as well.

[00:07:56]
The question was, is the role of enhancer kind of a middleware? Yes is the answer. A applyMiddleware is the function we're gonna take a look at a second. applyMiddleware takes a whole bunch of different middlewares and creates one composed enhancer out of all that middleware. Enhancers themselves can be used for a lot of things.

[00:08:15]
Adding middleware, using for the Redux DevTools, any kind of plugin that you wanna do or functionality that you need to add to Redux, enhancers are the way that you do that.