-: In the last section we spoke about the last feature
that we're gonna add into our application.
We then flipped on over to our terminal
and installed a couple packages.
You'll notice that I restarted my development server
with "NPM Run Start", so make sure you do the same as well.
I'll now flip back over to my code editor
and we'll first get started inside of our "Route.js" file.
So at the end of last section
we installed a "Middleware" called "reduxPromise"
that "Middleware" is used
to handle asynchronous action creators,
or action creators that tried to make network requests.
So we're gonna hook that middleware
up to our store creation.
At the very top, I will import "reduxPromise"
from "redux-promise".
And then I'm also going to import from the "Redux" library
the "applyMiddleware" helper as well.
So we're now gonna modify our "createStore"
method right here,
rather than adding in a third argument
of the "applyMiddleware",
which is where we hook up middleware,
I'm going to pull the entire "createStore" call
right here, out,
and we're going to assign it to a temporary variable
just to kind of clean up this function a little bit.
So I will assign "createStore" to a store variable
and then I'll pass that in as a store prop
to my provider, like so.
Now as the third argument, to the store,
I'll pass in "applyMiddleware"
and to "applyMiddleware", I'm gonna pass in "reduxPromise".
So "reduxPromise", like so, and I'll save that
and it's gonna do a little new line for me like so.
So we've got "reducers", "initialState"
and then all the "Middleware" that we're going to
pass into "createStore".
Now, quick reminder, we're gonna talk about "Middleware"
in great detail later on inside the course,
so if you're not super familiar with "applyMiddleware"
don't sweat it, we'll go through great detail
on what it's really doing for us.
Okay, so that's good.
We've now essentially taught "Redux" how to work
with asynchronous action creators.
So let's now add an action creator that will make a network
request over to that json API
and get this list of comments.
We'll first open up our "types.js" file.
Inside of here we'll add a new type for indicating a list
of comments have been fetched.
So I will say "export const" and we'll just call this thing
like "FETCH_COMMENTS".
I think that's reasonable.
So now we'll flip on over to our actions "index.js" file.
At the top I will import "FETCH_COMMENTS",
and then I'll make a new action creator
called "fetchComments".
"fetchComments" is not gonna take any arguments
because its sole purpose is to reach out to that API
that we're just taking a look at and get the list
of comments from over there.
So inside this thing, we're going to make a request,
off to that API.
Before I forget, let's import "axios" at the top.
So now inside of "fetchComments"
we'll say const response is "axios.get"
and then we'll pass in the URL
that we want to make a request to right here.
So to get that URL, I'll flip back over to my browser
and I've got that URL right here on the page.
So I'm gonna just take this directly outta the address bar
and I'll put it right into "axios.get".
So in total "https://jsonplaceholder.typicode.com/comments"
Now one thing I recommend you do,
just to save yourself a headache,
remove the 'S' outta the HTTPS
so that we don't run into any security issues later on
where a browser might complain about loading up
a secure resource from a non-secure page.
Okay, that's not strictly required, but it,
on some browsers might just help you out.
So now that we make that request, we'll return in action
with a type of
"Fetch_Comments"
and for the payload
we'll just pass that entire response through.
So take that entire response and toss it on there.
Okay, so that looks pretty good.
That's our "Fetch_Comments" action creator.
Let's take a quick pause right here.
We'll come back the next section,
we're gonna make sure that "fetchComments"
gets called from our comment list or comment box
wherever we want to put that button
and they'll make sure that we watch
for the "Fetch_Comments" type
inside of our comments reducer.
So quick break and we'll take care
of all that stuff in the next section.