Instructor: In the last section,
we wired up our async middleware right here.
We're now going to hook it up
to the rest of our application
and then we're gonna do a little bit of debugging
just to play around with it a little bit
and get a better idea of what's going on.
So to get started, I'm gonna open up my Root.js file.
This is where we create our redux store
and this is where we wire up all the different middlewares
that are included inside of our project.
I'm gonna find the reduxPromise middleware right here,
I'm gonna delete the import statement
'cause we're not gonna make use of that.
Instead, I'm going to import async
from middlewares/async.
And then, I'll take that function, our middleware,
and add it to the apply middleware function, like so.
All right, so I'm gonna save this file
and I'm gonna flip back over to my browser
and we're gonna test this thing out.
Now, one thing I wanna mention really quickly
is that in my comments reducer,
I still have the debugger right here
inside of fetch comments.
So I'm still going to be able
to see this data, or this action, come into this reducer.
All right, I'm gonna flip back over,
I'm gonna do a hard refresh.
And then, I'm going to sign in,
go to post a comment and fetch comments.
Now, just as before, I hit that debugger statement
so I should be able to log out my action
and see all of our response data
on our action payload property.
So there's the action.
I see fetch comments.
And on the payload property is our response data
from that API.
So the thing is definitely working the way we expect.
Now, before we just call success right there,
I am going to flip back over to the reducer,
I'm going to remove this debugger right here,
and I'm going to instead add a new debugger
inside of the middleware that we just created.
So inside of here, right above our if statement,
I'm gonna add a debugger.
So we're gonna take a look at all the different actions
that come into our middleware
and get a sense of how they're being handled
by our middleware.
So I'm now gonna flip back over.
I'll do another refresh.
And then, we're probably gonna very quickly
see that debugger statement hit.
All right, so I'm gonna try signing in.
And as soon as I sign in,
the debugger statement right here catches.
So our debugger statement gets called with an action
and I'm going to, again, log that action out.
Now in this case, you can see that our middleware
has been called with a change off action.
So we are trying to change our authentication status
over to true.
I'm gonna use the built-in Chrome developer tools
to walk through this middleware function
and see what it tries to do with this action.
So I go down to the if statement right here,
where we're gonna check to see if the action
has a payload property.
In this case, it does.
And then, we're gonna further check to see
if the payload property has .then property.
In this case, it does not have a .then property
or it has a value of undefined for it.
So it does not pass the if statement.
It enters the if statement's body
and we end up returning from our middleware,
calling next with action,
which sends our middleware, or excuse me,
sends our action to the next middleware
in our chain.
In this case, we have no other middleware
so the action gets sent on to our reducers.
So I'm going to resume my script right here
and then I'm going to flip on over to the post a comment
and try out fetching comments.
So when I click that,
I get pause inside of my middleware again.
I'm again going to look at the action variable.
And this time around, we see the initial action
that is issued by our action creator of fetch comments.
So we have a type of fetch comments
and we've got that kind of initial action payload
of the actual promise itself.
So this is the pending promise
that represents the request we made out to that JSON API.
So at this point, no data is available.
But if we start to walk down inside this function,
we, again, hit the it statement right here.
Excuse me, if statement.
We do, in fact, have a payload property
and that payload property has a .then function.
So in this case, we assume that yep,
we've got a promise here
and we're going to wait for it to resolve.
So we come down here, we chain on a .then,
and the function that we added right here
is going to be called when the response hits.
I'm gonna set a breakpoint inside of the callback function
and then I'm going to resume script execution.
So when it pauses again,
it's gonna catch inside this function body.
Okay, there we go.
So now at this point in time,
we've gotten a response back from that JSON API
and I could very easily log that out.
There is the response data right there.
So we take that response,
we take the old action, and we form up a new action object.
And then, we take that new action
and we attempt to dispatch it.
And when we dispatch this thing,
it makes it flow through all of the middlewares
one more time.
So if I now resume execution again,
we're gonna see our original debugger statement catch.
There it is right there.
So now, if we again log our action,
we'll see our brand, new action
that you and I just created inside of our middleware.
So now it's got a type of fetch comments.
This time, it does not have the promise.
Instead, the promise has been replaced
with the data that we actually care about.
So just as before,
we're gonna hit the if statement.
We don't have a payload with a .then property
so we skip over this middleware
by going to the next middleware in our chain.
And again, in our case, we don't have any middleware
so the action goes on to our reducer.
All right, so that is pretty much it.
That is the entire flow.
Now, I'm gonna remove that breakpoint
and I'm also gonna remove the debugger really quickly.
There we go.
So that is our first middleware.
That is a asynchronous action creator
handling middleware that you can now use
on your own projects.
I'll be honest with you.
This essentially does all the same stuff
that the redux promise middleware is going to do,
almost equivalent in functionality.
And the official redux promise middleware
takes a very similar approach
to what we're showing right here, as well.
So I still think that we could do a little bit more
with middleware.
You might have a good idea of what they do for us
at this point, but you might be wondering,
you know what, Steven?
Like, why would I use these outside of like redux promise
or the other official ones that you might install
on your own?
Like, when would you create a middleware
on one of your projects?
So let's come back the next section.
Now I'm gonna give you an idea for a middleware
that you might want to write on your own project.
It's gonna have, it's gonna be a little bit fun.
So let's continue in the next section
and we'll start working on a new middleware.