In the last section we had a long discussion about a change that we're going to make to our state object
for this particular application.
We had said that in our previous projects we had maintained a list of records and then the idea of a
currently selected or currently viewed record.
However because our application really has the idea of this extra piece of state which is the route
of our application we really no longer need the idea of an active post where we currently selected post
or something like that.
So instead we had said that we're going to end up with just a single piece of state the posts object
on that object.
The key would be the idea of a particular post and then the value would be the post itself.
Changing our posts object or poster right into an object like this is just going to make it a lot easier
in the future when we want to find a very particular post.
And just as a little preview I'm also going to let you know that it's going to make updating records
way way easier as well.
So that will be much easier to deal with too.
So let's now continue by working on our first action creator.
Will will be to fetch a list of posts and serve them up to our post index component.
So let's get started by working on our action creator inside of the actions index not J.S. file.
So gonna open that file up and we'll immediately get started by placing down some code for our first
action creator.
So I'll say export function.
The purpose of this action Krater will be to fetch a list of posts so we'll call it fetch posts.
And of course we need to return an object and that action which is the object right here has to have
a type.
So let's give it a typo or something like.
How about fetch.
Posts will define that type and export it right above.
So will say export Export Konst fetch posts is fetch posts like so OK so when we start to think about
this action creator which is supposed to fetch a list of posts and return them to that reduce or this
action creator needs to reach out to that redux blog API that we were looking at.
And so that's definitely going to involve a network request.
Remember that whenever we are thinking about making network requests inside of an action creator we
have to install X CEOs to make the actual request and we have to install redux promise to handle the
asynchronous nature of the request itself.
So let's flip on over to the terminal and install both of those libraries.
So all change on over to the terminal and we'll do NPM install dash dash save X CEOs and redox promise
and then we'll just let that thing run in the background.
Before we make use of either of those modules inside of here let's make sure that we wire up redux promise
as a middleware inside of our application.
So I'm going to go back to our top level index start js file.
Here it is right here.
We're going to import redux promise and then wired up to the Apply middleware call just as we had done
previously.
So little import promise from redux promise.
And then we will pass that into the supply middleware call right here.
So promise like so let me zoom out just a little bit so you can see the whole line and we go
OK that's looking good.
Let's flip back over to our action creator.
OK here we go.
So we need to also import the actual library into this file right here.
So let's import X-posts from Axel's inside of the actual creator.
We will generate a new request by using the X library.
So we'll say Konst request is Acciona get and we have to pass in the particular you are Elda we're trying
to make and get requests to.
So in our particular case we want to make a request to that redux blog API.
So let's look back over the documentation real quick.
Just as a review.
OK.
Sort of trying to go to redux blog Roku app dot com slash posts.
Now we're definitely making multiple requests to this API right here.
So I think that will probably define this first half of the L as just a kind of a route you are l of
sorts and then we will adjust the exact endpoint inside of each additional action creator.
So in short what I'm really suggesting that we do here is to maybe do something like say define a Konst
a top of route you are l and that would be something like HTP redux blog.
Heroku app dot com slash API.
And then inside of this particular action creator will take that route you are l an add in a couple
of other characters to the end of it.
So is place a template strength by using tactics.
So do make sure using back ticks right there and we'll say root you are l.
So we're trying to make a request to slash API slash posts like so.
Now the last thing to remember is that the API expects that we're going to pass along an API key as
well.
So as a second constant here I'm going to define an API key and that API key needs to be inside of a
query string.
And so we'll just define the entire query string by putting on the questionmark key.
And I remember just make up any old key right here you can use absolutely any key you want just needs
to be something unique.
So I think that all of use paperclip.
One two three four.
That's probably be unique Zong going to add that into our request.
You are all as well.
So we'll place another had been a string interpellation API key.
OK so that looks good for me at the request.
Now the last thing to do is make sure that we add it to the payload of the action that we're returning.
So we'll save payload and we'll pass in the request.
So as a reminder of what's going on right here we're making the Axel's request we assign it to the variable
request and then we assign the request to that payload property of the action that we're returning because
the request is being assigned to the payload property the redux promis middleware that we made use of
previously will automatically resolve this request for us whenever it sees this action come across.
So by the time that this action arrives in the reducer the payload property will contain the response
object from X-posts which will have our big old array of posts.
So this is looking pretty good at this point.
I think that we're about ready to flip on over to our reducer which we're going to create in the next
section and start doing some of the implementation side of there as well.
So let's take a quick break and I'll see it in just a second.