So we've now got Riak router all hooked up so we can add more routes that our user can navigate to at 2
any given time. 3
As a quick aside one thing to note about re-act router is that it gives the user the impression that 4
they are navigating to different web pages but they're really just sticking on the same page at all 5
times. 6
We're just swapping out the content on the screen to make them think that they're changing pages. 7
I always thought that was kind of the interesting distinction. 8
Anyways back to making progress we've got place to render our blog posts inside of posts index but we 9
don't have any blog posts yet in this section. 10
We're going to start working on our data layer by creating an action to fetch our list of posts. 11
So our index route you know just grab a list of all the posts that should be visible to our user. 12
Fetching this data is going to be very similar to the method we use to fetch data in the past. 13
So this should be pretty easy. 14
Kind of like a review. 15
First thing we're going to do is open up our terminal to install a couple of packages 16
in a new terminal window. 17
There we go. 18
We're going to install both ASIO's and redux promised again to help us make our network requests. 19
So Will do. 20
NPM install desk just save ASIO's and redux promise as reminder ASIO's is what we use to make our actual 21
network requests. 22
While at redux promises what we used to unwrap our promises and actions for us. 23
OK so we've got both those installed as a reminder we also need to make sure that redox Promus is wired 24
up to our application inside of index start. 25
Yes as a middleware. 26
So inside of here we'll go ahead and import promise from redux promise. 27
And then we will apply this as a middleware so say apply middleware and then give it just promise. 28
Like so this just makes sure that all of our actions flow through the promised middleware before reaching 29
the reducers. 30
We've spoken about this at gratingly before. 31
Nothing different. 32
OK looks good. 33
Next we're going to define an action creator in the index file of our actions folder up here. 34
And the purpose of this action Kreator is going to be to reach out and grab our list of blog posts from 35
the API. 36
So at the top we'll import x CEOs from X CEOs and then we will create our action creator. 37
So export function and I'm going to call this Thach posts 38
and we'll return an action from it. 39
Now don't forget the first thing we need to do is define our action type so we'll define that action 40
type up here by saying exports constant fetch oops fetch posts and we'll just make the string fetch 41
posts. 42
OK. 43
Next thing we need is the root Eurail for our API. 44
We're also going to have true provider API key as well. 45
Don't forget the API key. 46
So the route you are Ehle for our API is the exact same one that we were looking at in the previous 47
section when we were testing it out with postman. 48
So we'll say Konst route or El excuse me actually will pull this up outside of the action crater's and 49
we need to use it in a couple of different ones. 50
So let's put that right here. 51
Say Konst route you are l is HTP redux blog Heroku AB dot com slash API. 52
And then we also need our API key here as well. 53
So we'll say Konst API key is key. 54
And then again make sure you get to your question mark on here because it needs to be in the query string 55
. 56
And then basically any random string characters you want totally up to you. 57
Again totally random. 58
You don't need to register this beforehand. 59
It just needs to be somewhat unique. 60
OK so now we're ready to complete our action creator. 61
We'll make the request and then return the request as the payload from our action. 62
So I will say Konst request equals x CEOs get. 63
And then we're going to do some string interpolation here using a template string. 64
So we'll do our back Tick's member that's to the left of your one key and then we're going to grab our 65
route. 66
You are L and the endpoint that we want to reach out to is posts like so so do slash posts and then 67
we want to reference our API key like so. 68
Finally we need to add our request and the action type silty type is fetch pose and our payload is request 69
. 70
OK. 71
So I will reach out to our API make the request and return to action with the request on the payload 72
and read X promise we'll unwrap the promise and the data will flow through all of our inducers. 73
Again this is something that we've done several times before. 74
I know it's got to be a little bit tedious to type it out with me but nonetheless Sometimes we just 75
got to write the code right. 76
OK. 77
So this action looks good. 78
I like it. 79
Let's go ahead and implement a reducer in the next section to get access to our data off of that request 80
.