1 00:00:01,290 --> 00:00:06,780 So the user can now navigate to a page that will show that particular idea the post that they want to 2 00:00:06,780 --> 00:00:07,430 load. 3 00:00:07,620 --> 00:00:14,220 But now we have a similar problem as we did in posts index when we were trying to load data remember 4 00:00:14,220 --> 00:00:15,360 back and post index. 5 00:00:15,360 --> 00:00:21,450 We said whenever this component is about to mount's go ahead and fetch our posts you know go grab some 6 00:00:21,450 --> 00:00:22,860 data off the server. 7 00:00:23,280 --> 00:00:30,300 So we've now got a similar problem to that here inside of our posts show component whenever a user is 8 00:00:30,300 --> 00:00:33,700 about to view this component or you know it's about to show up on the page. 9 00:00:33,840 --> 00:00:41,090 We really want to do a get request or API and fetch a post with this very particular ID. 10 00:00:41,620 --> 00:00:44,820 So let's go ahead and implement that in this section. 11 00:00:44,820 --> 00:00:49,800 The first thing we need to do is make sure that we have an action creator that can fetch a single post 12 00:00:49,810 --> 00:00:50,040 . 13 00:00:50,250 --> 00:00:52,860 Let's start by making that action creator. 14 00:00:53,520 --> 00:00:59,850 So inside of our action creator or so in our actions file appear we'll just go through the process that 15 00:00:59,850 --> 00:01:02,700 we've done several times before at the top. 16 00:01:02,700 --> 00:01:16,680 We will create a new action type export constant fetch post that post and then we will create our action 17 00:01:16,680 --> 00:01:21,390 creator down here export function. 18 00:01:21,960 --> 00:01:22,480 Whoops. 19 00:01:22,500 --> 00:01:27,310 Fetch post and we'll assume that will always be called with an ID. 20 00:01:27,630 --> 00:01:39,360 The idea of the post that we need to fetch so will make our request will be a get request with the route 21 00:01:39,420 --> 00:01:50,130 you are l and we'll go to pose slash ID because we want to get the posts and point with a very particular 22 00:01:50,130 --> 00:01:54,560 ID the one that was passed into this function right here. 23 00:01:54,660 --> 00:02:03,720 Don't forget that we need to add our key onto the end like so then we just need to go ahead and return 24 00:02:03,750 --> 00:02:04,460 our action. 25 00:02:04,470 --> 00:02:05,640 So the return 26 00:02:08,610 --> 00:02:20,630 type fetch post it was and our payload would be request. 27 00:02:20,760 --> 00:02:21,120 All right. 28 00:02:21,120 --> 00:02:23,580 So this looks good for our auction creator. 29 00:02:23,580 --> 00:02:29,910 We've got our get request the route your L slash pose slash ID and then the API Ickey. 30 00:02:29,910 --> 00:02:31,470 This is looking pretty good. 31 00:02:31,530 --> 00:02:35,550 Now we just need to make sure that we collect the data inside of our reducer. 32 00:02:35,790 --> 00:02:46,080 So we'll go over to reduce or PPO's will grab that post as our actual type and then we'll handle our 33 00:02:46,260 --> 00:02:51,150 case fecche post. 34 00:02:51,210 --> 00:02:57,170 So remember whenever we fetch a individual post we want to save it on to this post key right here. 35 00:02:57,180 --> 00:03:08,780 So we'll say return St. Louis Post action payload DOD data. 36 00:03:09,600 --> 00:03:11,870 So keep our existing state around. 37 00:03:12,090 --> 00:03:17,460 But we want replace the post in there we want to use this new post that we just fetched from our API 38 00:03:17,520 --> 00:03:18,550 instead. 39 00:03:19,080 --> 00:03:19,340 All right. 40 00:03:19,350 --> 00:03:23,370 So this is looking pretty good right here. 41 00:03:23,370 --> 00:03:29,280 We just need to go ahead now and make use of that action creator inside of post show. 42 00:03:29,340 --> 00:03:34,680 So whenever post show is about to render we'll go ahead and call that action Krater that we just made 43 00:03:34,680 --> 00:03:36,360 . 44 00:03:36,360 --> 00:03:43,770 So we're getting pretty used to this creating or importing action creators and using them in components 45 00:03:43,800 --> 00:03:47,930 now so I hope it's really getting into your muscle memory by now. 46 00:03:47,970 --> 00:03:54,180 The top will do imports connect from re-act redux. 47 00:03:54,560 --> 00:04:03,470 And then one important action creator fetch post from actions index. 48 00:04:04,950 --> 00:04:09,570 And then we will go ahead and connect. 49 00:04:09,570 --> 00:04:12,410 Don't forget to do two sets of friends. 50 00:04:12,480 --> 00:04:23,190 We're not napping any state to props so we can go ahead and do no and we'll do fetch post as an object 51 00:04:23,190 --> 00:04:27,670 so we'll do our shorthand here for importing the action creator again. 52 00:04:27,720 --> 00:04:30,610 Next we'll make use of our lifecycle methods at the top. 53 00:04:30,630 --> 00:04:34,590 We got components will mount. 54 00:04:35,790 --> 00:04:40,350 So whenever the component is just about to show up on the screen let's make sure that we go ahead and 55 00:04:40,350 --> 00:04:43,450 try to fetch that very particular post ID. 56 00:04:43,680 --> 00:04:44,920 So we'll do this. 57 00:04:44,950 --> 00:04:52,270 dot props dot fetch posts this dot props dot params dot ID. 58 00:04:52,550 --> 00:04:54,880 Remember the ideas coming from you are l. 59 00:04:54,960 --> 00:04:57,060 So we pull the idea of the Ural. 60 00:04:57,180 --> 00:05:03,440 We pass it to fetch post fetch post goes and makes the back and request it resolves with some data or 61 00:05:03,450 --> 00:05:09,860 reduce or picks it up and then we want to make sure that we can show that post inside of here. 62 00:05:10,050 --> 00:05:15,210 I'm going to go ahead and save this and will go ahead and give it a shot in the browser. 63 00:05:16,080 --> 00:05:26,550 OK I'll refresh and it looks like we've got a request to 683 and we got our data right here. 64 00:05:26,550 --> 00:05:28,360 Perfect just what we wanted. 65 00:05:28,410 --> 00:05:31,270 Request for a single single blog post. 66 00:05:31,620 --> 00:05:37,470 And note that it does unlike our index route contain the content of the blog post which is specifically 67 00:05:37,470 --> 00:05:41,120 why we need to make a second request a follow up request here. 68 00:05:41,160 --> 00:05:42,420 All right this is looking good. 69 00:05:42,420 --> 00:05:44,920 Let's go ahead and continue in the next section.