Instructor: We just finished up
talking about higher order components.
We're now gonna move on to our next big feature,
which is middlewares.
So middlewares inside of a Redux application.
If we open up our current project
and find the SRC route.js file,
we can find the create store call right here.
And inside that, as a third argument,
we have passed the Apply middleware call in.
And so in the project that we've been working on
we've already been making use of middlewares.
In this section, we're gonna talk about
what a middleware is, and then we'll very quickly pivot
to talking about a middleware that
you and I are going to build together.
So let's get to it.
I'm gonna first start off by showing you a diagram
that will hopefully look at least somewhat familiar.
So this is a diagram of how React and Redux
communicate with each other
to make changes to the state inside of your application.
Everything starts up here, on the top left hand side
with React.
So as you very well know, we make React components that,
at some point in time, will call an action creator.
Those action creators are functions.
When we call them, they return an action object.
And everything up to that point right there,
up to action right here,
hopefully that's clear
and hopefully that's part of Redux that you understand.
Now, what happens to that action when it gets returned,
is where these middleware things come into play.
So when the Action Creator returns an action, that object,
that object with the type and the payload property
get forwarded to a series of middleware functions.
Middleware functions, right here, give us the ability
to log,
modify,
or even stop actions
that have been returned from our action creators.
So you can kind of consider them
as sort of a stop off station,
some point that we can kind of check in
and look at the actions that are about to be sent
to our different reducers.
Past that stage, the action then moves on to our reducers,
which produce some amount of new state,
which eventually ends going back to our React application
and our React components re-render it with that new state.
And then we wait for this entire cycle to repeat again.
So in this course, we've spoken at great length
about action creators, actions, reducers, state,
all this stuff.
All we're really doing right here,
is introducing this one, new, little piece.
And this one, new piece is the middleware.
And again, they are functions that allow us to inspect
these actions that are being returned from action creators.
So let's take a quick pause right here.
We're gonna come back the next section
and talk about the middleware
that you and I are gonna write together,
to get a better sense of how they're going to work.