Enhancers Solution

[00:00:00]
>> So our mission was to create a log enhancer that behaves a lot like the monitor enhancer, but instead of monitoring logs. Did anyone wanna figure this out, do you wanna walk through it together? It's kind of like a little bit of a swapping exercise here as well, but it's, again, to kind of just get our hands dirty, get some muscle memory around some of this stuff as well.

[00:00:22]
Did we have a name that we liked? What did we call our log enhancer? I'm not good at naming things. That and cache invalidation. Call it logEnhancer, you like logEnhancer? Give me collective nod, all right. That's good, cuz that's what I had in my notes. So, again, it starts as a function that will take createStore and returns a function that will take all the rest.

[00:00:51]
reducer, initialState and enhancer Neat, and then just whatever the kind of new reducer, we're using effectively closures in JavaScript to make a function that's wrapping whatever reducer function they passed in. So, in this case, we'll say const logReducer. That seems consistent, at least. And that will have the same API as any other reducer.

[00:01:26]
And it will go ahead and we can say, console.log. We will console log the state. Let's call it, old state. We'll actually call the real reducer now, With the state and action. And then we'll console.log new state with the state. And just for fun, I'm gonna add the action to each of those as well.

[00:02:06]
So if we had multiple actions within our application, we could see which action triggered that change. And now all we'd have to do is return that new state. Let's actually fix that. So we're gonna call the reducer. I'm gonna store the result of that function into newState. And then we'll return it out of our wrapped reducer.

[00:02:32]
And now we just return the real createStore. We'll finally call it after we intercepted it with our logReducer instead, which wraps whatever reducer they gave us. The initialState, if any. And the enhancer, if any.
>> I think you also want to log the newState on line 29.
>> Yep, Otherwise we'll just say it's the newState.

[00:02:58]
We want to store it, and then we'll log it, and then we'll return it. So we could swap it out. And you can see that now we get an initial action that flows through. Remember how we had state equals and the default argument? This kind of initialAction will go and trigger all of the default arguments in our reducers.

[00:03:22]
And then you can see that as we pass through the old state and the new state, in this case, it is actually undefined because if you look at our reducer again, it's super, simple in this case. We'll say like, You can see it in there as well. And so now we have a logEnhancer and a monitorEnhancer.

[00:03:51]
The problem is that there's one enhancer argument. So let's say hypothetically I have a situation where I wanna use two enhancers but createStore only takes one enhancer. And I wanna pass createStore to both of those enhancers. Does anyone have a way that I could do that?
>> Compose function.

[00:04:12]
>> Yes, compose, perfect, right? And so what I could in this case do is I could compose, and I'll do my logEnhancer. LogEnhancer, and my monitorEnhancer as well. And now you can see that both are happening. So compose, again, you could write compose yourself, you could use compose form lodash or pipe or flow, whatever.

[00:04:41]
It's just there to be helpful to you.