Narrator: In the last section,
we installed axios to make an Ajax request
and then we returned that request
on our action payload.
The goal here was to establish
that we had a big problem in our application.
When we returned our action,
it instantly got forwarded to all of our reducers.
We put a debugger statement in
and we confirmed that,
yep, promise is there or you know there is a request there,
but the problem was that we didn't give
the request any time the action resolve.
So by the time the action ended
up in this reducer, it was in still in pending,
it didn't have any data yet.
So, we're going to write a middleware
that's gonna help us wait
to send an action to a reducer
until the action is actually resolved.
That's the key.
We want it resolved before it hits our reducers.
One thing that we left in from the last section
was a debugger statement right here.
Do make sure that it gets removed,
so I'm gonna delete it right now.
Okay, looks good.
Before we dive into anything too particular
or anything around our application,
let's do a little bit more of a general talk
about what's going on inside of the middleware.
I'm gonna pull a diagram on the screen
that's gonna help us learn a little bit more
about one of the most important topics with middleware.
So this is what I refer to as a middleware stack.
We have a series or stack of middlewares.
We have middleware one, middleware two,
and middleware three.
So again, we can have many different middlewares
inside of one redux application
and they can all do just wildly, wildly different things.
Let's talk a little bit about the sequence of events here.
Whenever we create an action in an action creator
and return it from our action creator,
that action is then gonna be piped
through all the different middlewares that we have.
Middlewares have a common interface between each of them.
They each get called with a very particular action,
whichever action we're dispatching
or returning from an action creator.
Let's say, for example that we have three middlewares,
and the first and the third don't care anything
about the action.
They're just there to just exist,
let's say they have no purpose whatsoever.
They are just some empty middleware that we wrote
and they don't care about any particular action
that we create.
When an action flows into this first middleware,
the middleware will look at the action.
It's gonna say, "No, I don't care about this.
I don't wanna touch it,
I choose not to do anything with this action.
I'm just gonna pass it to the next middleware."
So the next middleware in the chain
which would be number two.
The keyword next I'm using here,
the very capitalized and bolded next
is a very important keyword, it's a very important term
and you'll see where it gets used
when we start writing the middleware.
But for right now, just understand that
if a middleware does not want to really mess
with a action at all
or it just wants to send it on
to the next middleware in the chain,
it will use in some fashion this next keyword.
So we're gonna say that middleware number one
doesn't care about the middleware,
or excuse me, doesn't care about the action.
And so it's gonna send it on to the next middleware
in the chain number two.
Middleware number two now might say,
"Okay, this action, I care about this one.
I'm gonna look at the actions type,
yes, I care about that type.
I'm gonna console log it
and I'm gonna forward it on to the next middleware."
So this would be an example of a middleware
where perhaps it cares about the actions
that are coming across and wants to do something with them
and wants to console log it in this case,
very straightforward, very simple action.
But nonetheless, it does do something with the action.
After middleware number two has had its fill.
It'll say, "Okay, I'm done with this action,
I've done what I need to do,"
and it will forward it on via the next keyword
to middleware number three.
Middleware number three now
is the last middleware in the chain,
and so if middleware three says, "Oh, you know what?
I don't care about this one either,
my job is something else."
When middleware number three
is done with the action and it says,
"Okay, send this action onto the next middleware."
If there are no other middlewares in the chain,
the action will then automatically be forwarded
onto our reducers.
So the whole point of all this,
what I really want to impress upon you
or what I wanna pass along is,
if an action doesn't care about a middleware
or if it just wants to send it along its path
onto the next middleware
or eventually, the reducers at the end,
we're going to use this next construct right here.
So with this idea of actions, middleware and next,
let's take a shot at our first middleware
in the next section.