Lecturer: Let's talk a little bit more about
middlewares in Redux.
Middlewares are one of my favorite topics
mostly because I consider middlewares
to be one of the killer features behind Redux.
Before we start talking too much
about exactly what a middleware is,
and what it's doing inside our applications,
let's install our boilerplate package for this section.
So in my browser, I'm going to navigate
to github.com
slash stephengrider
slash reduxsimplestarter
and then once here, I'll clone the repository.
If you don't want to clone it, there are,
of course, directions for just downloading a zip file.
Once I got the link back in my terminal,
I'll run git clone with the path,
and I'm gonna clone this to middleware's directory.
Then I'll change into middlewares
and start my dependencies installing with npm install.
Okay, so we're good to go.
I'm gonna pull a diagram on the screen
to talk a little bit more about middlewares.
Now this diagram's probably gonna look pretty familiar
and hopefully it will.
It's a model of the Redux action to state cycle.
So we start off on the left
top left hand corner here with our React application.
So React is sitting there rendered to the DOM.
Perhaps a user clicks on something,
or maybe some component mounts,
and it calls internally some componentWillMount method,
or whatever might be happening.
Something eventually will call an Action Creator.
Action Creators return Actions.
And then here's where it gets interesting
for our purposes today.
These actions are all sent to middlewares.
Now let's continue on the cycle
and then come back to middlewares.
So after an action goes through our middlewares,
it'll flow into our reducers.
The reducer produces new state
and this new state is sent back to React.
So consider it to be a cycle of sorts.
So again, the point, the portion of this
that we really care about
is the bottom right hand corner here,
the middleware portion.
So middlewares are called with all the actions,
or perhaps a better way to word it would be to say
all of our actions flow through all
of our different middlewares that we might create.
We can have multiple middlewares
within our Redux application.
There's no reasonable limit, I should say.
There's no reasonable limit
to the number of middlewares we can have.
Our middlewares should be written to be not
not mind if they ran in different orders.
So each middleware is its own discreet
kind of unit of functionality
or service to us,
and they all run in order, or sequentially.
After an action flows through all the middlewares,
it pops out at the reducers.
The purpose of the middleware is to log, stop, modify,
or even just not even touch an action.
So middlewares are just something that's sitting here
inside the process between actions and reducers,
and we can use them to accomplish a huge, tremendous,
widely different variety of tasks.
So we're going to pick a very specific task today
for our application that we're gonna build.
But I'm gonna say this now
and I'm gonna say many times again,
we can make middlewares do wildly, wildly different things.
Let's continue in the next section
where we will talk more
about the application that we're gonna build.