Middleware in Redux

[00:00:00]
>> Steve Kinney: So there is one more that we're gonna kinda take a look at, which is this apply middleware. Apply middleware is basically in between that action and it hitting the reducer. You can do other stuff. We will see this other stuff later today. We'll see this other stuff later today when we need to fire an API call or something along those lines.

[00:00:27]
Because this is all just really simple, pure JavaScript, where we're just mutating an object, or not mutating an object, replacing an object, right, careful with my words there, right? So if we wanna fire an API call, or do other stuff, have side effects, right, that doesn't happen. Everything's gotta be pure in that cycle that I showed you.

[00:00:48]
Applied middleware gives us an opportunity to interject ourselves, and to be able to have some thoughts and opinions, right? And so we could write just some middleware, that's a simple JavaScript function just like everything else in Redux, right? So we can say logger ,for instance, right? And one of the things that gets passed in is the ability to get the current state of the store, right?

[00:01:17]
The current, we say the store is this object that's holding everything, it's got the ability to dispatch action, so on and so forth. The snapshot of what that object is at that moment, we call state, right. And so at any given point, we can get the current state of the store, and the middleware is a function that returns another function, right?

[00:01:40]
And there's a little bit of functional programming in here, like functional programming warning, where we return a new function, it takes the argument called next. All right, so this, we're returning a function that returns another function. And we'll do whatever we need to do in here. So console log, MIDDLEWARE, and we could go ahead and get the state of the store and do something to it.

[00:02:11]
Or make an AJAX request or something along those lines. And then you can see the action.
>> Steve Kinney: All right, we use middleware a few places. One is we use it with libraries like Redux and Redux Observable, right? We also use it for analytics, right? Instead of going throughout our code base, and finding all of the times they did a certain action and doing a react application.

[00:02:42]
We listen for all of the actions that are coming through. It's a hey, it's an upload users, right, action. We will then send that the segment IO, right, or something along those lines. And we have one common place in our code base that is listening for every action firing through and then can make those analytics calls.

[00:03:00]
Right, and all of that kind of stuff so that we can debug and stuff along those lines and see usage of the application, right. So it's a place to hook into that entire cycle that we saw earlier and have opinions about what we're doing. The one thing that you need to do is you do need to call Next at some point, right?

[00:03:26]
>> Steve Kinney: Because you can chain multiple middleware together, right? Just because we have a middleware that's sending analytics to segment IO does not mean that I don't want to have Redux Observable, too, right. The idea of middleware is you chain them together. You can do multiple things along the way.

[00:03:41]
And then have something that comes out the other end, right, that will eventually go to the reducer.
>> Steve Kinney: Right, so this will create our entire flow in this case, right. And all that we need to do is when we create a store,
>> Steve Kinney: Give us some space.
>> Steve Kinney: We can give it a reducer, and we can also,

[00:04:14]
>> Steve Kinney: Use this applyMiddleware helper function.
>> Steve Kinney: And it will go ahead, and we can then kinda compose that chain for ourselves. All right, so we can applyMiddleware, we'll start with our logger, right. And I can do additional ones in here and basically, this could be then redux thunk, an observable, a logger and basically those actions will flow through each of them, right.

[00:04:44]
So we can kinda hook in there and do additional stuff. Generally speaking, to be really honest, for us the analytics tool was the first custom middleware we ever had to write. We've used middleware, right, and we'll see that a little bit, right? Again, redux thunk, redux observable, so on and so forth, redux promise.

[00:05:07]
But the fact of the matter is the analytics, when we were, hey, someone was like, I'm gonna have to spend a week going through all the code base to do all these analytics functions. And I was like, what if we did this, right, it was the very first time we had to write it.

[00:05:19]
As long as you understand the kind of basic flow and the idea that a lot of this is functions and modifying objects, effectively, that is redux, right, at this point. We'll actually see it as we build some applications and get a little more into the leaves, but that is the scope of it and all of it.

[00:05:38]
>> Speaker 2: Quick point on the last line, did you mean to call create store? Is that what that is?
>> Steve Kinney: I did.
>> Speaker 2: Okay.
>> Steve Kinney: Thank you.
>> Steve Kinney: Okay, thank you very much.