Instructor: In the last section,
we wrote out our first middleware.
We went through that long process of doing that re-factor.
The entire goal of that was just to get you to understand
that what we're looking at right here is a series
of three functions that successfully return each other.
Now again, we don't, this is like not a hard requirement.
Like Redux did not have to be written in this way.
The author could have definitely figured out a way
to instead just write, have you write one single function,
that would be called with all the appropriate arguments.
So it could have absolutely been looking like that.
Like a single function that gets dispatched,
the next thing and the action thing.
But instead, they decided to go at
this more fancy format up here.
Not necessarily a great reason behind it,
but that's what we got.
So now that we've got the middleware put together
we need to figure out what logic
to actually write inside of here.
So inside this function body right here,
we are going to have our action.
This is where our middleware logic gets executed.
So this right here is where we're going
to go through this entire flow.
So inside that function body, we need to decide
whether or not the action contains a promise,
and then depending upon whether or not it does,
we'll do something slightly different.
So let's get to it.
We're gonna first get started by writing out
a couple of comments to guide ourselves.
So inside the middleware, the first thing we want to do
is check to see if the action has a promise
on its payload property.
If it does, then wait for it to resolve.
If it doesn't, then send the action
onto the next middleware.
So that's our overall guide here.
For right now, the most important thing to do
is to figure out exactly how we're gonna check to see
if the action has a promise on the payload property.
And then we're going to immediately also
write out this statement right here,
where if it doesn't have a promise,
we're gonna send it on to the next middleware
inside of our chain.
So to check to see if the middleware,
if the action has a promise on its payload property.
Unfortunately, we don't have really
any fancy way of doing that.
So to check to see if it has a promise,
we're gonna write out if this thing
does not have a payload at all.
So let's first check to make sure
that it has a payload in the first place,
or if there is not a then function on the payload.
So we again, don't really have a fancy way to check to see
if something is or is not a promise.
All we can really do is look at the payload property
and say, does that thing have a then property?
If it does, then we're just going to assume
that it is in fact a promise.
Not the best solution right here,
but unfortunately in JavaScript,
it's basically the best thing we have.
So if you and I do not care about this action,
and we will not, if it doesn't have a payload
or it does not have a promise on the payload,
then we're just gonna take that action
and send it on to the next middleware in our chain.
To do so, we're gonna use that next function.
Remember, next is a reference
to the next middleware in the chain.
So to forward the action on,
we will say return next with action, like so.
The return keyword is here just to make sure
that we do not execute any other code
inside this middleware.
So we're not necessarily returning any value here.
We're really just trying to make sure
that we bail out of this middleware
and don't run any other code inside of it.
Then again, the next function is a reference
to the next middle middleware on the chain.
So we're just saying, hey, you know what?
We don't care about this thing at all.
Just take the action, forward it on.
Just let it do its thing. We don't care about it.
Okay, so that's step one for our middleware.
Let's take a quick pause right here.
We'll come back and in the next section,
we're gonna handle the other case.
The case in which we do have a promise.
In which case we want to wait for this thing to resolve.
So, quick break and I'll see you in just a minute.