-: In the last section, we started talking
about Middlewares inside of a React and Redux application.
In this section, we're gonna continue by taking a look
at a Middleware that we're actually already using
inside of our current project.
So, if I flip back over to my editor
and find the Root.js file,
you'll recall that we had wired up
the Redux Promise Middleware
when we created our Redux store right here.
So, let's get a better sense
of what this Middleware is doing for us
and when we get a better understanding of it,
it's gonna help us understand why we use Middlewares at all.
So, to give you a better idea
of why we are using this Middleware,
I want to remind you about how our action creator
of Fetch comments works right now.
So, inside my actions directory,
I'll find the index.js file.
Inside there, is the Fetch comments action creator,
right here.
So, remember what this thing does.
It makes a request over to that JSON API.
We then get back something that we called the response,
and then we just attached it
to this payload property right here,
and we return that action,
and presumably, it's going to eventually show
up with some data inside of our comments reducer.
Then, over inside of our comments reducer,
so, here's our reducer folder, comments.js right here.
We've got our Fetch comments type where we map over
all the data that we got back from that API,
and essentially consume the data
that came back in that response.
So, let's kind of put this flow into a diagram,
and get a better idea of what's really going on.
Okay, so here's the flow.
Here's what happens when we call
that fetch Comments action creator.
So, we call the action creator,
and then on the very first line
of the action creator function, we make that AJAX request.
So, that's a network request that's going
to reach out to that JSON API.
Now, here's the really key part to understand.
When we make that request,
we then go down to the next line of code
where we form up that action object and return it.
The time between these two steps right here,
the time between making the request,
and then returning the action, is near instantaneous.
It happens like, just lickety split,
in a fraction of a fraction of a second
but as you very well know,
anytime we make a network request to some outside API,
it might take some amount of time to get a response back.
So, after we return our action from the action creator,
at some point in the future, we don't really know when,
but at some point in the future,
we get a response back from the JSON API.
Now, here's where the magic is.
We know that the time
between these two steps right here is instantaneous
but we know that the time
between these two steps might be much longer.
It might be dozens of milliseconds,
and it might be several seconds,
depending on the quality of our internet connection,
but it seems like, no matter how long it takes
to get that data back from the JSON API,
by the time the action shows up
inside of our comments reducer,
it always has our data available from that API.
So, even though we don't know
how long it's gonna take to get that JSON data back,
it seems like it's always available inside the reducer.
Now, to give you a better idea
of what's really happening here,
let's try adding in a debugger statement to our reducer
and just kind of look at the different values
that are showing up inside of there.
So, inside of my comments reducer
I'm gonna find the Fetch comments type right here,
and at the top of that case,
I'm gonna add a debugger statement, like so.
So, we're gonna try to call our
Fetch comments action creator.
We're gonna try to hit this debugger statement,
and then we're just going to manually look at the data
that is contained inside of this action object,
and remember this action object right here
is whatever gets returned
from our Fetch comments action creator.
All right, so I'm gonna flip on over to my browser.
I'm gonna sign in and then I'll go over to post a comment,
and I'll click on the fetch comments button,
which is going to call that action creator,
and then inside my Sources tab, right here,
I immediately hit that debugger statement.
So, I'm gonna expand my debugger window over here.
There we go,
and then inside the console,
I'm gonna write out a couple of commands
just to look at the value of the action
that showed up inside that reducer.
Now, I know the code right here is kind of hard to read,
just because this is transpiled code
from that ES2015 that we've been writing down to ES5,
but you can kind of still get an idea of what's going on,
or more specifically, what we really care about
is just the action object that's in there.
So, if I just write out action,
it's gonna tell me about the action
that just showed up inside this reducer.
So, it has the type of Fetch comments, which is expected,
and then if I look at the payload property,
you'll notice that it has that data property,
and in data, is a list of 500 comment objects.
So, just like we said on that diagram,
clearly whenever this action shows up inside of a reducer,
it has the response that came back from that API.
Every single time.
Even though there's clearly a little bit
of like, a race condition of sorts right here,
where we return our action from the action creator
but we are always waiting to get that response back
before the action shows up inside the reducer.
So, let's now do something kind of interesting.
We're gonna go remove that Middleware,
the Redux Promise Middleware.
We're gonna just take it out of our application entirely
and then we're gonna see what happens.
All right, so I'm gonna flip back over to my Root.js file,
and I'm gonna find the Redux Promise Middleware right here
and I'm just gonna delete it.
We can leave the apply Middleware column here.
That's totally fine.
So, then I'm gonna save this file.
I'll flip back over to the browser,
and I'm gonna refresh the application,
and then we're gonna hit that debugger again,
and we're gonna see what that action looks like now,
without the Middleware in here.
All right, so I'm going to again, sign in.
I'm going to go to the Post A Comment page,
and then I'll click on Fetch Comments.
So, again, I've hit that debugger,
right here,
and now I'm going to again log out the action object.
So now, this time, the action object looks
a little bit different.
When I inspect it, we have a type of fetch comments,
just like we had before,
but the payload is not a response coming back
from that JSON API.
Instead, it's a pending promise.
So, this pending promise right here,
means to say that our request is still pending
or the request is still out on the internet,
we're still waiting for some response to come back
from that JSON API.
So, clearly, without that Promise Middleware,
our application does not then work the way we expect.
Without the Promise Middleware,
when our action shows up inside this reducer,
we are still waiting for that request to be completed.
So, we are in a slightly different flow.
We're in one that looks like this.
So, now, we're calling Fetch comments, we're calling to,
or we are issuing the AJAX request.
We return the action,
and that action instantly gets sent to the reducer,
and that entire process right there takes one millisecond,
or a fraction of a millisecond.
Some very, very small amount of time,
but the time between making that AJAX request,
and actually getting a response back from the JSON API?
Well, that takes much longer.
Again, maybe dozens of milliseconds
or maybe many seconds,
depending on the quality of our internet connection.
So, without that Redux Promise Middleware,
our request has showed up
inside the reducer way before it's ready.
So, this in total is an example of why we use Middlewares.
We use Middlewares to look at actions
that are about to be sent to a reducer
and we get the opportunity to delay the action,
or we get the ability to log it,
or modify it or stop the action entirely,
and it's only through these Middlewares
that we can make these asynchronous requests,
or many other different types of operations,
work the way we expect inside of a Redux application.
Okay.
So, that's kind of like the first little bit on Middlewares.
That's why we are using Redux Promise.
We are using Redux Promise
because we want to inspect every action that gets dispatched
or that gets returned from the action creator,
and if it contains a request,
we want to delay it, cause we wanna make sure
that we get that response to come back
before it goes on to the reducer.
So, now that we've got a better idea
of how Redux Promise works, let's-
Or at least I should say, what it does for us.
We don't really know how it works just yet.
We at least know what it does for us.
Let's continue in the next section,
and we're gonna talk about the actual implementation
of Redux Promise
and then we'll get started
on putting together our own Middleware.