-: In the last section, we wrote
out the first step of our middleware.
If our action does not have a payload property
or if the payload property is not a promise
then we just take the action
and forward it onto the next middleware of our chain.
So we don't care about it, just send it on not our deal.
We're now gonna continue
into handling the case in which there is a promise.
So if we, there is a promise, we want to wait
for the promise to resolve or get its data
and then create a new action
with that
data
and dispatch it.
So if we do have a promise, we're gonna wait
for it to resolve or wait for the response to come back
from that API that we're trying to reach out to.
We'll then create our new action
with the data that we got back
and we're going to dispatch that action.
Now, I've been using this term dispatch quite a bit.
I'm using dispatch right here.
And you'll recall that dispatch was one
of the properties that we pulled
off the first argument to the function up here at the top.
Let's have a very quick discussion
of what this dispatch thing is and what it's doing for us.
So I'm gonna flip over to a diagram.
It's very similar to one we looked at before
but I made a couple of changes to it.
So up here is our action
and I'm showing the action going into this dispatch thing.
We'll come back to that in just a second.
But before we do
notice how when something is
passed to dispatch, like the action
it gets forwarded onto middleware number one right here.
And then we've got that next function
which is a reference to the next middleware on our chain
and that's reference to the next middleware on our chain
which in this case would be the reducers
cuz there's no other middleware.
So the dispatch function right here is what actually
starts this entire process.
The dispatch function takes an action
it calls all the middleware with that thing, and then
it eventually makes sure that the action ends up
at all the reducers.
So you can think of this dispatch thing right here
as being the really main central focal point
of everything that really goes on behind the scenes
with redux.
Any time that you've been calling an action creator already
your actions have been taken, passed to this dispatch
function and then sent to all the different middleware
and reducers inside of your redux store.
So again, the dispatch function right here takes an action
and it kicks off this entire process of middleware
reducers, all that kind of good stuff.
So when we say back over here that we want to
create a new action with that data and dispatch that action
that's essentially saying that we want to create a new
action and send it through this entire chain of middleware
and the reducers all over again.
That's the purpose of dispatch.
So with that in mind, let's now start writing out our code
for this block right here.
So in order to wait for the promise to
resolve, we're going to chain onto the promise
with a dot then statement.
So at this point, if we get down here and we've passed
over the if statement, that means that down here there is
in fact a promise on our payload property.
So you and I can hook into that promise
by writing out action dot payload dot then
and then passing a function
to dot then.
So this is how we normally interact
with the promises in like the normal case anyways
we can chain on a dot, then statement and add on a function.
And this function will be called whenever
the promise resolves.
Or in other words, get some data
get some data back from our API.
The function itself will be called
with whatever data was returned from that API.
And so we'll call that argument the response object.
So now inside the function right here
we're going to create a new action
with that data and the same type that it had previously.
And then dispatch the action.
So I'm going to make a new variable called new action.
We're gonna take all of the properties
out of the action object that got passed to this middleware
so all the properties are inside of it.
Now, normally whenever we create an action
it's only gonna have a tight property and a payload
but we want to write our middleware right here
to accommodate for any number
of additional properties being added to it as well.
So that's why we're doing the dot, dot dot right here.
We're saying, okay
just take whatever properties this thing has
grab 'EM all and throw them onto this new action object.
And then on top of that
we're gonna add on a new payload of the response.
So this right here, this is the magic.
This is where we wait to get that response back
from that API
or whatever asynchronous request just occurred.
And then we override the payload
with whatever data came back.
And then after that, we're going to dispatch the new action.
So dispatch new action right here is what's going to
take that action and send it
through the entire process of all of our middleware again.
So it's essentially this arrow right here.
So it's gonna take that action
send it through all the different middleware we have
in our application, and that again is what's gonna make sure
that we don't have to organize our middleware
in some certain order.
It's gonna make sure that no matter what
every middleware is always gonna see
that action that has our data tied to it.
So now that action is gonna flow
through our sync middleware again
but this time there is no promise tied to it because
the Payload property now has the response data instead.
So it's gonna flow into the no case right here
and it's gonna flow on to our reducers.
All right, so that is it for the middleware itself
but you still might be really curious
about what's going on here.
So let's take a quick pause in the next section.
We're gonna wire this up to our application
and then we're gonna do a lot
of debugging to watch this entire series of actions
and operations occur as we call that fetch comments.
Action creator.
So quick break and I'll see you in just a minute.