1 00:00:01,170 --> 00:00:06,330 So we've now got Riak router all hooked up so we can add more routes that our user can navigate to at 2 00:00:06,330 --> 00:00:07,480 any given time. 3 00:00:08,010 --> 00:00:12,810 As a quick aside one thing to note about re-act router is that it gives the user the impression that 4 00:00:12,810 --> 00:00:17,430 they are navigating to different web pages but they're really just sticking on the same page at all 5 00:00:17,430 --> 00:00:18,520 times. 6 00:00:18,570 --> 00:00:23,220 We're just swapping out the content on the screen to make them think that they're changing pages. 7 00:00:23,220 --> 00:00:26,490 I always thought that was kind of the interesting distinction. 8 00:00:26,540 --> 00:00:34,560 Anyways back to making progress we've got place to render our blog posts inside of posts index but we 9 00:00:34,560 --> 00:00:37,360 don't have any blog posts yet in this section. 10 00:00:37,380 --> 00:00:42,430 We're going to start working on our data layer by creating an action to fetch our list of posts. 11 00:00:42,480 --> 00:00:47,740 So our index route you know just grab a list of all the posts that should be visible to our user. 12 00:00:48,180 --> 00:00:52,200 Fetching this data is going to be very similar to the method we use to fetch data in the past. 13 00:00:52,200 --> 00:00:54,030 So this should be pretty easy. 14 00:00:54,030 --> 00:00:57,510 Kind of like a review. 15 00:00:57,510 --> 00:01:01,920 First thing we're going to do is open up our terminal to install a couple of packages 16 00:01:07,630 --> 00:01:09,860 in a new terminal window. 17 00:01:10,050 --> 00:01:11,430 There we go. 18 00:01:11,430 --> 00:01:17,030 We're going to install both ASIO's and redux promised again to help us make our network requests. 19 00:01:17,250 --> 00:01:17,800 So Will do. 20 00:01:17,820 --> 00:01:30,090 NPM install desk just save ASIO's and redux promise as reminder ASIO's is what we use to make our actual 21 00:01:30,090 --> 00:01:31,440 network requests. 22 00:01:31,530 --> 00:01:36,930 While at redux promises what we used to unwrap our promises and actions for us. 23 00:01:37,460 --> 00:01:43,740 OK so we've got both those installed as a reminder we also need to make sure that redox Promus is wired 24 00:01:43,740 --> 00:01:47,550 up to our application inside of index start. 25 00:01:47,630 --> 00:01:50,220 Yes as a middleware. 26 00:01:50,220 --> 00:01:56,670 So inside of here we'll go ahead and import promise from redux promise. 27 00:01:57,870 --> 00:02:04,560 And then we will apply this as a middleware so say apply middleware and then give it just promise. 28 00:02:04,560 --> 00:02:10,860 Like so this just makes sure that all of our actions flow through the promised middleware before reaching 29 00:02:10,860 --> 00:02:11,800 the reducers. 30 00:02:11,850 --> 00:02:14,240 We've spoken about this at gratingly before. 31 00:02:14,280 --> 00:02:15,700 Nothing different. 32 00:02:16,490 --> 00:02:19,590 OK looks good. 33 00:02:19,590 --> 00:02:26,030 Next we're going to define an action creator in the index file of our actions folder up here. 34 00:02:26,640 --> 00:02:30,900 And the purpose of this action Kreator is going to be to reach out and grab our list of blog posts from 35 00:02:30,900 --> 00:02:31,940 the API. 36 00:02:32,310 --> 00:02:41,020 So at the top we'll import x CEOs from X CEOs and then we will create our action creator. 37 00:02:41,080 --> 00:02:46,260 So export function and I'm going to call this Thach posts 38 00:02:48,960 --> 00:02:52,010 and we'll return an action from it. 39 00:02:52,110 --> 00:02:57,030 Now don't forget the first thing we need to do is define our action type so we'll define that action 40 00:02:57,030 --> 00:03:08,880 type up here by saying exports constant fetch oops fetch posts and we'll just make the string fetch 41 00:03:08,880 --> 00:03:10,930 posts. 42 00:03:12,720 --> 00:03:13,720 OK. 43 00:03:14,250 --> 00:03:17,390 Next thing we need is the root Eurail for our API. 44 00:03:17,520 --> 00:03:20,310 We're also going to have true provider API key as well. 45 00:03:20,310 --> 00:03:22,150 Don't forget the API key. 46 00:03:22,350 --> 00:03:26,880 So the route you are Ehle for our API is the exact same one that we were looking at in the previous 47 00:03:26,880 --> 00:03:29,720 section when we were testing it out with postman. 48 00:03:30,060 --> 00:03:38,010 So we'll say Konst route or El excuse me actually will pull this up outside of the action crater's and 49 00:03:38,040 --> 00:03:40,560 we need to use it in a couple of different ones. 50 00:03:40,650 --> 00:03:43,030 So let's put that right here. 51 00:03:43,320 --> 00:03:55,910 Say Konst route you are l is HTP redux blog Heroku AB dot com slash API. 52 00:03:56,250 --> 00:03:58,810 And then we also need our API key here as well. 53 00:03:58,830 --> 00:04:05,760 So we'll say Konst API key is key. 54 00:04:05,760 --> 00:04:10,350 And then again make sure you get to your question mark on here because it needs to be in the query string 55 00:04:10,360 --> 00:04:10,660 . 56 00:04:11,070 --> 00:04:15,080 And then basically any random string characters you want totally up to you. 57 00:04:15,120 --> 00:04:16,260 Again totally random. 58 00:04:16,260 --> 00:04:18,100 You don't need to register this beforehand. 59 00:04:18,120 --> 00:04:21,220 It just needs to be somewhat unique. 60 00:04:21,950 --> 00:04:24,730 OK so now we're ready to complete our action creator. 61 00:04:24,960 --> 00:04:29,840 We'll make the request and then return the request as the payload from our action. 62 00:04:30,460 --> 00:04:35,200 So I will say Konst request equals x CEOs get. 63 00:04:35,760 --> 00:04:40,300 And then we're going to do some string interpolation here using a template string. 64 00:04:40,320 --> 00:04:46,350 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 00:04:46,840 --> 00:04:47,530 route. 66 00:04:47,640 --> 00:04:57,840 You are L and the endpoint that we want to reach out to is posts like so so do slash posts and then 67 00:04:57,840 --> 00:05:04,880 we want to reference our API key like so. 68 00:05:04,890 --> 00:05:14,700 Finally we need to add our request and the action type silty type is fetch pose and our payload is request 69 00:05:14,700 --> 00:05:17,110 . 70 00:05:17,130 --> 00:05:17,440 OK. 71 00:05:17,460 --> 00:05:24,800 So I will reach out to our API make the request and return to action with the request on the payload 72 00:05:25,040 --> 00:05:30,370 and read X promise we'll unwrap the promise and the data will flow through all of our inducers. 73 00:05:30,420 --> 00:05:33,720 Again this is something that we've done several times before. 74 00:05:33,870 --> 00:05:39,300 I know it's got to be a little bit tedious to type it out with me but nonetheless Sometimes we just 75 00:05:39,300 --> 00:05:40,540 got to write the code right. 76 00:05:40,680 --> 00:05:41,190 OK. 77 00:05:41,280 --> 00:05:42,390 So this action looks good. 78 00:05:42,390 --> 00:05:43,280 I like it. 79 00:05:43,320 --> 00:05:48,940 Let's go ahead and implement a reducer in the next section to get access to our data off of that request 80 00:05:48,950 --> 00:05:49,440 .