Instructor: Okay, I really can't delay anymore.
It's time to actually write a middleware.
We've gotten long enough in this section
without writing any, so let's get to it.
Inside of our source directory,
let's make a new folder called middlewares.
Now, the middleware that we're gonna write here
is gonna help us work with the asynchronous nature
of our FETCH_USER's action.
So let's call our middleware simply async.js.
It's just gonna help us with an asynchronous action.
Now, when we start writing the middleware,
the code is gonna look really weird.
It's gonna have a very weird,
very strange function signature.
But just bear with me for a bit, and we'll talk about it.
Let's put the code down first, and then we'll kinda review.
So at the very top, we'll put down export default function.
This function is gonna get called with an object
one property of which is called dispatch.
So we're gonna pull off just the dispatch off that object.
It is a function.
We're gonna pull off, just dispatch.
So we'll use the curly braces.
Next, we'll open our function body.
And then this is where it gets really weird,
so bear with me.
We're gonna write return next.
We're gonna put down a fat arrow.
We're gonna write action.
We're gonna do another fat arrow.
And then we'll open up a set of curly braces.
Then inside of here, just two more steps.
We'll put console.log action.
And then next action.
And then I'm gonna save it.
Now, before we talk about anything that's going on here,
let's actually wire the middleware up to our application,
and just see what's going on.
To wire up our middleware,
we're gonna go over to our top-level index.js file
inside of our source directory.
Once inside of here, we'll import our new async middleware.
Import async
from middlewares/async.
And now all we have to do
is add this little async right here.
Async to this applied middleware
that should already exist inside this file.
So inside of the first set of parens for applied middleware,
we'll just add async like so.
Okay, so at this point in time, let's flip back over,
and kinda just glance this code very briefly.
I want you to kind of think in your head,
"All right, what's gonna happen here?"
Like, "What is the purpose of this middleware?
What might happen?"
You know, I haven't necessarily told you enough
to have a reasonable idea about what's going on.
Nonetheless, I'd love if you just cave it,
kinda gave it a shot, you know.
Kinda think what's gonna happen here.
Let's open up our browser, and pull up our application,
and just see what happens.
I'm gonna open the terminal, the console.
And then refresh the app.
And it looks like we've got a little bit
of a mistake in here.
I think I made a small typo.
Oh, I don't know why, but I put on a set of parens.
My mistake.
Put a closing paren right here.
Totally my mistake, I apologize.
So let's save.
We'll refresh.
And now, okay.
So this is looking a little bit better.
We got a console.log in here, and specifically, it says,
type fetch_users and a payload of a promise.
Okay, so this is pretty interesting.
So let's talk about exactly what this middleware is doing.
So in the entire topic of,
as we're talking about middlewares,
I know we've got this really weird function signature.
From this file, we're returning a function.
When ran, it's going to return another function.
That's what's going on with the first fat arrow here.
And then when that one's ran,
it's gonna return another function
that can get called with an action.
So I know this looks crazy.
Let's try reformatting it a little bit.
Maybe use a little bit of vanilla ES5,
and then things might make a little bit more sense.
So no need to follow along this part.
I would definitely prefer if you just watched.
So well, I'm gonna add in a function keyword here.
We're gonna have next.
I'm gonna add in another return function action.
And then only inside of here,
and I'm gonna put the code that I actually care about.
Okay, so I know this, we've got three functions in a row,
so it still looks a bit weird,
but at least it looks a little bit more normal, right?
We have a function, that returns a function,
that returns a function.
Why is the method signature like this?
I don't have an immediate answer for you.
I can only say it just is, right?
It's just one of those things.
Let's save this file, and see if we can actually run it.
And sure enough, we still get our console.log here.
And it looks like, you know, of course,
where our console.log in actual action.
So this is the signature of our middlewares.
They're always gonna have a very similar signature to this.
The top-level function is gonna get called with dispatch,
and we'll talk about what that is.
It's gonna return another function
that gets called with the next keyword,
and we'll talk about what that is.
And that's gonna return a function that gets called
with a very particular action.
And in this case, the action is whatever action
we might dispatch over time,
or whenever we turn an action from an action creator.
You can see that we first console.log the action.
And then we called next with the action.
And so this is why I was harping on
the keyword next so much.
Next, literally means send this action
onto the next middleware in my stack.
If we don't have any other middlewares,
it's gonna be forwarded onto our reducers.
Okay, I would love to stick
with the existing fat arrow syntax that we had.
So I'm going to do a little bit of refactoring
back to the code we had before.
We'll put next action.
And we should be good to go.
I'm gonna save.
Rerun, just to make sure everything's good.
And yep, we still have the console.log here.
Okay, so one more time, just to review.
Our middlewares always have the same signature at the top.
We're always going to return a function
that gets called with dispatch.
And we're gonna return from that another function
that gets called with next.
And we're gonna return from that another function
that gets returned with action.
Then inside of that function body,
inside the innermost function body,
this is where we can place some logic
that we can run every single time an action creator
returns an action inside of our application.
So in here, essentially,
this is kind of our window into the world.
It's we're kinda like a little, you know, porthole,
and we're looking out, and we see absolutely everything
that's happening to our application flow through here.
Every single action that we return from action creator
is gonna flow through this function.
And so this simple console.log right here,
if I was running this in a really large application
with a lot of action creators,
I would see tons of console.logs of every single action
that got dispatched inside of our very large application.
In this case, we only have a single action creator.
And so when I refresh the page,
we see only a single action get called.
All right, so this gets us a little bit closer
to making use of middlewares, at least slightly.
But we still have no idea.
You know, once we're in here,
how in the world are we gonna use this kind of method,
or this, you know, little availability in here.
The ability to reach out to this action.
How are we gonna use this to actually resolve our promise,
and send only the data that we care about onto our reducers?
Let's talk about that in the next section.