Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Redux Middleware: applyMiddleware" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Steve creates a logger middleware that logs actions to the console.

Get Unlimited Access Now

Transcript from the "Redux Middleware: applyMiddleware" Lesson

[00:00:03]
>> Steve Kinney: What we need to next is figure out this applyMiddleware, which is one that you will not find yourself using very often, except for when you bring in Middleware and you wish to apply it. And again, it's really just a take on compose, which is, it will allow you to kind of go in and, like, build intermediary steps in this process.

[00:00:24] Because right now, you have the dispatch is going to the store, this whole process is going along. There could be situations where we would like to step in the middle and do something. Because I'm not very creative, we're gonna start with the worlds simplest example, which is, we'd like to log more things to the console, right?

[00:00:45] What's a few more console I was gonna do? So let's create a function called logger.
>> Steve Kinney: And it's gonna get an object that has dispatch and the get state on it. We just want the get state in this case, cuz that's what we're gonna log. And so this function, you gotta put an equal sign here.

[00:01:03] This function is gonna go ahead and it's gonna return another function. That's gonna take the next thing that's gonna happen in the chain, right? Cuz you can chain together Middleware. So it's gonna take whatever the next middleware that's registered is. And then we'll get the action.
>> Steve Kinney: So it's like, current function on top of curried function.

[00:01:27] Unless you're writing middle, if this stresses you out, unless you're writing your own custom middleware, it's not something you need to know in order to react. It's something you need to know if you want to write custom middleware. So we have, at this point when we get inside the function we're definitely gonna have the current state of the store.

[00:01:45] We will definitely have the action. And we'll have whatever's next. Your only responsibility inside of this middleware is to pass the action to the next piece of middleware. So theoretically, you have done your job if this is the entire piece of your middleware. I've serious questions about what job you set out to do, if this is your middleware.

[00:02:05] Because all you are doing is taking the action, taking the next piece of middleware and giving the action to the next piece of middleware. I guess you are being a good citizen but that's really about it. So what we could also do is we could console log, middleware.

[00:02:21] And we'll do the getState and the action.
>> Steve Kinney: Very cool. And I can do stuff below, as well, right? If I want to find stuff that happens later, but we're gonna just keep it really simple for now, and I'm just gonna break this on some lines so that everything's a little bit clearer.

[00:02:44]
>> Steve Kinney: All right, very cool. So this is my very awesome middleware and I think that'll be good. We can hold onto this as well. This will actually return something we can take a look at in a second. Let's actually do that.
>> Steve Kinney: We'll console,log this value and it'll just return it.

[00:03:10] All right, so we have this, we have middleware, creating a piece of middleware is not necessarily enough. The last thing that you need to do is obviously is, the whole reason that got us on this middleware journey is we need to apply to the middleware. The middleware must be applied, all right.

[00:03:29] So,
>> Steve Kinney: Let's go ahead,
>> Steve Kinney: And grab this. Turns out create store. Where's my create store? Let's get rid of it, so we can create a new one.
>> Steve Kinney: Let's start bring it down, so I have everything in scope. Crystal actually takes three arguments. It takes the var reducer, unless you cheated and combined reducers to make one reducer.

[00:03:57] So the reducer it takes the second argument is an initial state of the world. We did that with our individual reducers, but you could also say like, her. Here is the entire state tree that I would like you to start out with. So we'll just go ahead and give that an empty object for now.

[00:04:12] And then the last thing is the ability to apply middlewares.
>> Steve Kinney: And I'll put in our logger. And applyMiddleware can actually take multiple arguments of middleware that it will apply using compose and we're full circle.
>> Steve Kinney: I'm gonna bring up the logger. My only worry here, cuz I'm writing everything in one file that I'm gonna have stuff like in a wrong order.

[00:04:52]
>> Steve Kinney: But I got to watch a live code debug order in the giant file.
>> [INAUDIBLE].
>> Steve Kinney: So, we've got our store. We'll say add(5).
>> Steve Kinney: We get that object back out.
>> Steve Kinney: Let's bring some stuff down, otherwise we'll take a quick technical break, as I debug my middleware real quick.

[00:05:32]
>> Steve Kinney: We've also got the logger, got all this stuff going on. Let's check out the store.getState.
>> Steve Kinney: Cool. Lets take a few minutes to quickly debug this and then we will come right back. So we did resolve the error, which is exactly what I warned myself about, which is originally I had tried to use the error message reducer.

[00:05:57] In the createStore above where I had defined it. So it wasn't defined, which broke the world. So we can see here, that we are logging all sorts of stuff to the console about the action that it received. What we did in the reducer, the whole subscription that happened.

[00:06:17] We've seen a whole bunch of stuff. Now logger, you will probably not write a logger middleware. Chances are like other then if you're trying to demonstrate applyMiddleware to a group of people, like you might not necessarily need to write any middleware, right? You might need to use middleware.

[00:06:32] You will actually see two different middlewares that we'll use today. And that's what we'll use applyMiddleware to take somebody else's middleware and apply it. So if like, a function that took a next function and then returned a function that took an action that then did stuff with the next function and the action made you like your palms a little sweaty.

[00:06:49] Don't worry, like, likely unless you where writing middleware, that is not something you are gonna need to do, but like now at least you know what is happening under the hood if you need to. So, here's the thing, Redux is functions and actions, effectively, right? And a really great part about that is you know it's easy to test, functions and actions.

[00:07:12] Right, there is nothing in some weird closure scope. There is nothing encapsulated inside of a component. There are, you give an object to a function and you see what came out the other end. You wanna test the reducer? Okay, that's a function, it takes into objects. Take the function, passing the two objects, see if you got what you wanted to get.

[00:07:33] It's very easy to test our redux code. And on that theme, we're going to play with some Redux test.