MIddleware Solution

[00:00:00]
>> So our mission was simply just create a second piece of Middleware predominantly to see how you can actually chain multiple pieces of Middleware together. So they log Middleware, and now we wanted to make the monitor Middleware as well. We have some of the implementation up here so we can kinda steal a little piece of that as well.

[00:00:18]
And so down here we'll do const. Monitor Middleware, that'll be against store. Next and action and listen, I'm not proud of this. The way that I remember this is the first three letters of the word snack. I don't know if that's helpful to you. That is how I remember the three which I think about how much I like snacks and that is how I know is a store next and action.

[00:00:51]
The rest of the letters aren't helpful, yeah, that's how I remember. So, in here we would have our performance and now instead of this new state, what we're gonna do is say just next. Action and then we will console log at diff. And then to use multiple Middleware apply Middleware accepts any number of arguments, that it will compose together into one chain of Middleware.

[00:01:24]
So here, we'll say monitor Middleware. And now you can see we are getting both again. Where we get the performance monitoring as well as the state changes. So really all apply Middleware, is this abstraction over enhancers that involves less boilerplate for you to write. And is chainable out of the box and it creates one enhancer out of all the Middleware.

[00:01:46]
And is useful for kind of either having side effects around the flow of actions because even as we said in the very beginning of this. A reducer is a pure function that takes two inputs and makes one output. It should theoretically not have side effects. We have all put console logs inside of our reducers.

[00:02:03]
But in terms of things you can't necessarily make a promise, your hand away to promise and reduce or anything along those lines. So Middleware gives you a place where you can inspect the flow of actions. You can modify those actions, you change, replace them and dispatch new actions.

[00:02:19]
If you did not call next to action based on some kind of conditional. It would never make it through the rest of the Middleware and to the reducer. Sometimes that's what you want, sometimes you rely on someone dispatch a function, you don't wanna make it all the way to reduce.

[00:02:32]
So you wanna go make that ajax request, do whatever wait for the promise to resolve. Get that result, and then turn that into the action that goes to the rest of the chain. Middleware is the place to do that. And so that's this kind of common cases gives you the ability to inspect that flow as well.

[00:02:49]
And so that point congratulations, you can print out a certificate and put it on your wall. You now know the entirety of the Redux API. That is all we covered all five of the methods. We covered all four of the ones on the store. We have gone through all that there is to know about Redux.

[00:03:09]
The next step for us is to figure out how to put it into a react application, right? And so what we'll do is we'll take really three different approaches. We'll use hooks to just hook our Redux store up to react at all right. And then we'll figure out how to get state and dispatch actions from our components using hooks.

[00:03:32]
And then we will look at how to do it using higher order components. We'll talk a little bit about what strategy you might want to use and why. And then finally, we'll take a look at it using Redux toolkit. Which will wrap a lot of this up for us and theoretically allow you to use either one of those API's as well.