Instructor: So we've got our middleware skeleton here
where we're console logging every single action
that flows throughout our entire application.
Right now, we've only got one action,
so eh, a little bit boring.
I think we could do better.
Our goal, remember, is to somehow use a middleware
to make sure that by the time
our action ends up in our reducers,
it's already been resolved,
and it has all the data that we were trying
to load off of our request.
So let's take a look at a diagram
that's gonna help us build this middleware.
This is what I wanna give a shot at trying.
Let's take a look at it.
At the very top, we start off with our action,
and it's gonna flow into our middleware,
which we're gonna call async middleware.
The very first thing we do is we say,
does the action contain a promise specifically
on the payload property?
If it does not, then hey, you know what?
We don't care about it.
Just send it on to the next middleware.
So this would be a great example of where we just,
very easily, use that next keyword.
We just say, hey, I don't care about this action.
It's not my bag, it's not my job.
Just send it on to the next one.
What about, though, when it does contain a promise?
So if we get an action in our middleware,
and it does contain a promise,
we're gonna say, okay, great.
This is our job, this is what we do.
This is why I was made as an action creator.
Let's go ahead and just sit around
and wait until this action or this promise resolves.
Once it resolves some, like, who knows how long later,
we're going to say, okay, it just resolved.
Here's the data.
And here's where it gets really interesting.
Once we've got the data, we're gonna create a new action
with the exact same type as the original one,
and then we're gonna send this very new action
through all of our middlewares again.
So we're gonna make a new action,
and then it's gonna come up,
and it's gonna go through all of our middlewares again.
It's gonna start at the very top
and flow through everything again.
So this is our plan right here.
Let's see if we can't go ahead and put it into action.
Let's handle the easy case first.
Let's handle the case in which the action,
let's say, it does not contain a promise.
We just wanna forward this thing on,
and we don't really care about it.
Let's handle that easy case first.
So, because JavaScript doesn't really have very good,
or really any, typing system in it,
we can't really say, hey, is this a type promise?
So we're gonna kind of divine whether
or not there is a payload, or excuse me,
whether or not there is a promise
on the action dot payload property.
Let's say if there is not a payload,
or if action dot payload dot then does not exist,
so in the case that we have right now
is if there is not a payload,
or if the payload does not have a dot then property,
dot then being specifically the promise helper dot then,
then let's just return it.
Let's add a comment in here too, just to clarify.
If the action does not have a payload,
or the payload does not have a dot then property,
we don't care about it, send it on.
Just to be clear about the dot then,
this is where we use, like, any promise dot then.
It's how we chain on something to do
when the promise actually resolves.
So we're just using the existence of a dot then property
to figure out whether or not this is an action.
All right, so let's see if this works.
I'm going to say, if we don't have a promise,
I want to console log the action,
and we're gonna say we don't have a promise.
So let's see what happens now.
I'm gonna flip back around my browser,
refresh the page,
and, okay, so we get our console log.
We do not have a promise,
and that totally makes sense,
because hey, payload is a promise right here.
Very good.
So this takes care of square one.
It takes care of the case that, maybe,
we've got many different action creators in our application.
Some of them are almost certainly
not gonna be containing promises.
They might be doing who knows what else.
So in any middleware we write,
we make sure that we only target the actions
that we very specifically care about.
And if we don't care about the action,
we always call next with that action
to pass it along to the next middleware on the chain.
If we don't pass it along to the next middleware
on the chain, our action basically just stops here.
It just stops, and it's sitting in limbo,
and nothing ever happens to it again.
So out of every action or every middleware that we create,
we need to make sure we always call next,
unless we very explicitly do not want to allow
this action to continue on,
or to propagate to other middlewares
that we have in our application.
Okay, so we've handled the very easy case.
Let's tackle the harder case in the next section,
the case in which, you know what?
We do have a promise.
Let's wait for it to resolve.
And when it resolves,
we'll dispatch a new action that's gonna flow
through all of our middlewares again.
I'll see you in the next section.