So the user can now navigate to a page that will show that particular idea the post that they want to 2
load. 3
But now we have a similar problem as we did in posts index when we were trying to load data remember 4
back and post index. 5
We said whenever this component is about to mount's go ahead and fetch our posts you know go grab some 6
data off the server. 7
So we've now got a similar problem to that here inside of our posts show component whenever a user is 8
about to view this component or you know it's about to show up on the page. 9
We really want to do a get request or API and fetch a post with this very particular ID. 10
So let's go ahead and implement that in this section. 11
The first thing we need to do is make sure that we have an action creator that can fetch a single post 12
. 13
Let's start by making that action creator. 14
So inside of our action creator or so in our actions file appear we'll just go through the process that 15
we've done several times before at the top. 16
We will create a new action type export constant fetch post that post and then we will create our action 17
creator down here export function. 18
Whoops. 19
Fetch post and we'll assume that will always be called with an ID. 20
The idea of the post that we need to fetch so will make our request will be a get request with the route 21
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
ID the one that was passed into this function right here. 23
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
our action. 25
So the return 26
type fetch post it was and our payload would be request. 27
All right. 28
So this looks good for our auction creator. 29
We've got our get request the route your L slash pose slash ID and then the API Ickey. 30
This is looking pretty good. 31
Now we just need to make sure that we collect the data inside of our reducer. 32
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
case fecche post. 34
So remember whenever we fetch a individual post we want to save it on to this post key right here. 35
So we'll say return St. Louis Post action payload DOD data. 36
So keep our existing state around. 37
But we want replace the post in there we want to use this new post that we just fetched from our API 38
instead. 39
All right. 40
So this is looking pretty good right here. 41
We just need to go ahead now and make use of that action creator inside of post show. 42
So whenever post show is about to render we'll go ahead and call that action Krater that we just made 43
. 44
So we're getting pretty used to this creating or importing action creators and using them in components 45
now so I hope it's really getting into your muscle memory by now. 46
The top will do imports connect from re-act redux. 47
And then one important action creator fetch post from actions index. 48
And then we will go ahead and connect. 49
Don't forget to do two sets of friends. 50
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
so we'll do our shorthand here for importing the action creator again. 52
Next we'll make use of our lifecycle methods at the top. 53
We got components will mount. 54
So whenever the component is just about to show up on the screen let's make sure that we go ahead and 55
try to fetch that very particular post ID. 56
So we'll do this. 57
dot props dot fetch posts this dot props dot params dot ID. 58
Remember the ideas coming from you are l. 59
So we pull the idea of the Ural. 60
We pass it to fetch post fetch post goes and makes the back and request it resolves with some data or 61
reduce or picks it up and then we want to make sure that we can show that post inside of here. 62
I'm going to go ahead and save this and will go ahead and give it a shot in the browser. 63
OK I'll refresh and it looks like we've got a request to 683 and we got our data right here. 64
Perfect just what we wanted. 65
Request for a single single blog post. 66
And note that it does unlike our index route contain the content of the blog post which is specifically 67
why we need to make a second request a follow up request here. 68
All right this is looking good. 69
Let's go ahead and continue in the next section.