1 00:00:00,600 --> 00:00:03,450 Let's continue working on our post show component. 2 00:00:03,720 --> 00:00:07,770 Now in the last section we did say that it seems like this component is going to be pretty easy to put 3 00:00:07,770 --> 00:00:08,470 together. 4 00:00:08,670 --> 00:00:09,810 And yeah that is true. 5 00:00:09,810 --> 00:00:15,600 There's not going to be a lot of code here but there is one very important aspect or a concept that 6 00:00:15,600 --> 00:00:18,440 is kind of underlying the creation component right here. 7 00:00:18,480 --> 00:00:21,090 So let's figure out exactly what that is. 8 00:00:21,090 --> 00:00:26,690 So it all comes down to how we load our data inside of our application really quick. 9 00:00:26,700 --> 00:00:32,920 I want you to just imagine that a user comes to our application by navigating directly to the root route. 10 00:00:33,060 --> 00:00:40,110 So the Post index component if the user visits the post index component first inside of our application 11 00:00:40,470 --> 00:00:45,390 it'll call that action creator that we made much earlier to fetch our big list of posts. 12 00:00:45,600 --> 00:00:50,070 So that action creator will go and fetch all of our different post from the back end API. 13 00:00:50,190 --> 00:00:56,610 And we would eventually end up with a Post piece of application state that contains maybe post 1 2 and 14 00:00:56,610 --> 00:00:56,990 3. 15 00:00:57,030 --> 00:01:03,570 So all the different posts we have now I want you to imagine a different thing that might occur in Siver 16 00:01:03,570 --> 00:01:05,490 application a different flow. 17 00:01:05,490 --> 00:01:13,110 I want you to imagine that the user opens up their browser and manually navigates over to the posts 18 00:01:13,200 --> 00:01:19,950 show a component by presumably going to local host ADHD slash post slash 5. 19 00:01:19,980 --> 00:01:22,310 So maybe they are too legalistic with too. 20 00:01:22,440 --> 00:01:26,260 So maybe they want to see in the post with an ID of two. 21 00:01:26,340 --> 00:01:32,580 Now in an ideal world whenever a user wants to look at a very particular post we're not going to go 22 00:01:32,580 --> 00:01:34,840 and fetch the big list of posts again. 23 00:01:35,010 --> 00:01:39,830 We're only going to fetch the very specific post that a user wants to see. 24 00:01:40,110 --> 00:01:41,840 So post 2. 25 00:01:42,630 --> 00:01:49,170 So if a user goes directly to the post-show component we want to only fetch the data that is required. 26 00:01:49,170 --> 00:01:54,660 But if a user lands on an application by going to the Post's index page we want to fetch everything 27 00:01:54,660 --> 00:01:56,540 that's available. 28 00:01:56,850 --> 00:02:03,030 It's really important to keep in mind that a user can enter into your application on pretty much absolutely 29 00:02:03,090 --> 00:02:09,500 any page that they want by either bookmarking the page or maybe they open up a new tab or maybe they 30 00:02:09,540 --> 00:02:11,020 share a link with a friend. 31 00:02:11,070 --> 00:02:17,150 You always have to assume that a user might be entering to any given page inside of your application. 32 00:02:17,160 --> 00:02:22,050 So what I'm really trying to say here is that the post-show show component really needs to be responsible 33 00:02:22,080 --> 00:02:24,230 for fetching its own data. 34 00:02:24,300 --> 00:02:29,580 We cannot assume that the user first went to the Post's index page and fetched the big lists of posts 35 00:02:29,610 --> 00:02:35,280 and then navigated it over to post so we have to always assume that the user or we need to fetch fresh 36 00:02:35,280 --> 00:02:41,220 data for the user whenever the user comes to this component so that in mind let's start off this new 37 00:02:41,220 --> 00:02:48,390 component by putting together an action creator to go and fetch a very particular post so I can flip 38 00:02:48,390 --> 00:02:54,240 back over to my code editor and I'm inside of my post show component right here. 39 00:02:54,570 --> 00:02:58,760 So the goal is to first create an action creator that will fetch our given post. 40 00:02:58,770 --> 00:03:03,260 Let's open up our actions index stock G-S file and then inside of here. 41 00:03:03,300 --> 00:03:08,650 At the very bottom will define a new action creator called export function. 42 00:03:08,670 --> 00:03:15,660 Fetch post and we're going to assume that this function this action creator is going to be called with 43 00:03:15,660 --> 00:03:18,860 the ID of the post that we want to fetch. 44 00:03:19,230 --> 00:03:25,680 So receive an ID or receive an argument of ID then inside of your. 45 00:03:25,710 --> 00:03:31,440 We can form up an X CEOs get request to reach out to our API and fetch the very particular posts that 46 00:03:31,440 --> 00:03:33,070 we're interested in. 47 00:03:33,240 --> 00:03:37,180 At this point I do want to remind you how the API works. 48 00:03:37,470 --> 00:03:44,890 If we make a request to API slash slash 5 we'll get back just that very particular blog post. 49 00:03:45,090 --> 00:03:51,200 So this is the type of router right here that we want to end up with. 50 00:03:51,280 --> 00:03:52,200 All right so we'll see. 51 00:03:52,210 --> 00:03:58,110 Konst request is going to be Acciona don't get will use a template string here. 52 00:03:58,120 --> 00:04:02,450 So do make sure that you're using tactics tactic's inside you are L.. 53 00:04:02,590 --> 00:04:05,310 Start off with the root you are l. 54 00:04:05,440 --> 00:04:14,640 Then we'll say slash posts slash the ID of the post you want to fetch and then the API. 55 00:04:14,830 --> 00:04:15,520 Whoops. 56 00:04:15,520 --> 00:04:18,460 Curly braces API key like so. 57 00:04:20,960 --> 00:04:25,820 And of course we want to make sure that we return an action from every one of our action creators so 58 00:04:25,820 --> 00:04:34,460 we all return a type of fetch post with a payload of requests. 59 00:04:34,470 --> 00:04:36,280 Let's not forget to create this typewrite. 60 00:04:36,330 --> 00:04:38,230 So I'll scroll up to the top of the file 61 00:04:42,030 --> 00:04:51,590 and we'll define export Konst That's post like so. 62 00:04:51,780 --> 00:04:56,680 OK so we've now got an action creator which should be able to reach out and find a very particular post 63 00:04:56,680 --> 00:04:58,280 from our back and server. 64 00:04:58,720 --> 00:05:04,750 Let's now flip on over to our producer and make sure we add in a case to catch this new type and add 65 00:05:04,750 --> 00:05:07,160 it to our application level state. 66 00:05:07,680 --> 00:05:13,210 So I'm going to open up my reducer post file from the import statement at the top. 67 00:05:13,210 --> 00:05:20,600 We'll also import Thach post and then we'll add on an additional case. 68 00:05:20,670 --> 00:05:24,850 So case fetch post. 69 00:05:25,500 --> 00:05:28,190 OK so this is going to be a little bit interesting. 70 00:05:28,190 --> 00:05:32,230 Now we know that our application or our Post piece of state is an object. 71 00:05:32,270 --> 00:05:35,980 So we know that we're going to be ultimately returning an object here. 72 00:05:36,050 --> 00:05:42,290 Now we already have some number of posts possibly that have been fetched and stored inside this reducer. 73 00:05:42,300 --> 00:05:46,520 Now I really don't want to throw away all the different data that I fetch over time. 74 00:05:46,520 --> 00:05:52,580 Really I want to add to my existing application level state rather than tossing away all the previous 75 00:05:52,580 --> 00:05:54,380 posts I've ever fetched. 76 00:05:54,380 --> 00:05:58,730 So to make sure that we take all the posts that we've already fetched and include them in here we'll 77 00:05:58,730 --> 00:06:02,470 say dot dot dot state like so. 78 00:06:02,540 --> 00:06:08,480 So take all the existing posts we have take them all out of that state object and put them into this 79 00:06:08,480 --> 00:06:11,140 new object that we are about to return. 80 00:06:11,720 --> 00:06:17,840 And then on top of that we're going to add a new key value pair where the key will be the idea of the 81 00:06:17,840 --> 00:06:21,880 post that we fetched and the value will be the actual post itself. 82 00:06:21,920 --> 00:06:27,950 So remember that the posts that we fetch is available as action not payload dot data because we're using 83 00:06:27,950 --> 00:06:32,300 Acciona here and the data that we care about is on the data property. 84 00:06:32,810 --> 00:06:33,920 So let's start off easy. 85 00:06:33,920 --> 00:06:41,400 We'll first say here's the post here's the post that we're getting post is action dot payload dot data. 86 00:06:42,410 --> 00:06:50,180 Now we need to make sure that this object right here contains the ID of this post as a key. 87 00:06:50,390 --> 00:06:51,750 So we're going to do things first. 88 00:06:51,770 --> 00:06:56,040 A very simple long form way that you might do if you were writing S-5. 89 00:06:56,240 --> 00:06:59,860 And then we're going to come back and refactor it to use a little bit of E6. 90 00:06:59,900 --> 00:07:04,040 So want to make sure everything is clear to start and then we'll do the fancy stuff after. 91 00:07:04,210 --> 00:07:12,380 So we'll say Konst new state this is going to be the straightforward way than new state postcard ID 92 00:07:12,680 --> 00:07:14,840 is post. 93 00:07:14,840 --> 00:07:22,280 So take that new state object and clear up the comma there take the new state object and add on this 94 00:07:22,370 --> 00:07:29,990 additional property of the posts ID and set that equal to the posts and then return new state. 95 00:07:30,020 --> 00:07:35,870 So if we only had 5 available this is the code that we would end up with with E6 we can do something 96 00:07:35,930 --> 00:07:38,210 a little bit more clever. 97 00:07:38,480 --> 00:07:40,180 So I'm going to clean all this up. 98 00:07:40,180 --> 00:07:43,380 I mean if you want to you can comment this all out and refer back to it. 99 00:07:43,430 --> 00:07:47,690 Actually I think I'll go ahead and comment it so we can refer back to it. 100 00:07:48,440 --> 00:07:55,210 So all we really need to put down here is return an object that is going to get all the state that we 101 00:07:55,210 --> 00:07:56,560 already had. 102 00:07:56,560 --> 00:08:03,490 Now here's the new piece of syntax we're going to put on squared races square brackets I should say 103 00:08:04,690 --> 00:08:17,510 inside of it will say action payload dot data dot ID a colon and then x not payload dot data. 104 00:08:17,540 --> 00:08:23,250 OK so this code on this line right here hundred loops sorry. 105 00:08:23,430 --> 00:08:25,610 Hundred percent identical. 106 00:08:25,980 --> 00:08:30,540 Same exact thing as what we're doing in these four lines of code right here. 107 00:08:31,290 --> 00:08:34,260 By placing the square braces we are not creating an array. 108 00:08:34,260 --> 00:08:36,660 Remember we are not making array right here. 109 00:08:36,780 --> 00:08:38,590 We are doing QI interpellation. 110 00:08:38,760 --> 00:08:46,260 So we're saying whatever the variable action payload data ideas make a new key on this object using 111 00:08:46,260 --> 00:08:50,050 this value right here and set its value equal to action. 112 00:08:50,100 --> 00:08:52,170 Payload data. 113 00:08:52,170 --> 00:08:57,870 So over time as a user starts to fetch more show routes inside of our application will fetch each of 114 00:08:57,870 --> 00:09:03,900 these additional posts and we'll add them into the overall state object right here. 115 00:09:04,770 --> 00:09:05,540 OK. 116 00:09:06,000 --> 00:09:11,160 So in this section we put together our fenceposts action Creator and we also added a little bit of logic 117 00:09:11,160 --> 00:09:15,610 to our reducer to meld that new post into our application level state. 118 00:09:15,960 --> 00:09:20,580 Let's take a break and we'll continue in the next section and start working on making sure that the 119 00:09:20,580 --> 00:09:24,260 posts show component will actually call that action creator. 120 00:09:24,300 --> 00:09:26,190 So I'll see in just a second.