In the last section we put together our fetch post action creator and wired it up to our reducer as
well.
We're now going to continue inside of our post show component.
We'll start off by importing the action creator and wiring it up to this component and then we'll make
sure that we can fetch the actual post and display it inside of here as well.
So let's get started at the top.
We'll start off by importing our connect helper from the re-act redox library and we'll also import
the actual creator that we just added in as well which was posts fetch.
Still check that real quick fetch post.
Other way around.
First post from actions now we can hook this up with the connects over to the component self at the
bottom so it can say connect the second set of parentheses we'll go around Post show.
We do not yet have a map state to prop's function.
I definitely expect we will but we definitely do not have one yet so will pass and no as the first argument
and as the second argument will receive that action creator fetch post.
Ok so it looks good.
Now the real question comes down to when exactly do we want to call this action creator.
So we've covered fetching data previously inside of our posts index page.
We have said inside of that component that we would place that data fetching action creator into a component.
Did mt life cycle method.
Remember that component did MT would be automatically called once the component was rendered to the
DOM.
So I think that's a totally appropriate approach to take this time around as well.
So inside a post show will define component.
Did mount and then inside there.
We can call that action creator.
So this prop's fetch post.
Do recall that these life cycle methods have to be spelled correctly.
So make sure that you don't have a typo in the Word component.
That's an extremely common error to make.
Very common to misspelt component accidentally.
All right.
So now the instant this component appears on the screen we're going to reach out and fetch that post.
Presumably the action creator will fetch that post you'll get added to our post piece of state and that
means that we then need to take that post out of our application level state and get it into our component
with a map state to prop's function.
So let's define our map state to prop's function.
Map city prop's will be called with the state object and all we really care about the only proper we
really care about all of here is the post piece of states or the Post property.
So we'll do a little bit of destructuring on the argument object and say hey you might just give me
the list of posts here.
Now the last thing we need to take care of is to recall that we are always trying to fetch a very particular
ID.
So with fecche post up here we want to make sure that we tell this post exactly what ID we're trying
to access or what what post we're trying to get to fetch.
And in the same case down here with map state the props this is the big list of posts and we don't really
want to work with a big list of posts we want to work with a very particular one.
In both cases we need to know about the ID that sits inside the URL because that ID is the very important
piece of state that we really care about that is going to dictate exactly how this component behaves.
So to get access to that you are or the little token that's inside the you are ill I should say we all
make access to a prop from that is provided to us from re-act router.
So up inside the component in Mount we can access this.
Props don't match dot harams dot ID.
So this right here is provided to us directly by re-act router.
Now with re-act router the match right here is the top level property.
The Paramo property that's inside of it is an object that lists all the different wildcard tokens that
exist inside the URL.
So if we go back to the index js file and we find our route's definition we're not only limited to having
one wildcard inside the you are l right here we could just as easily have maybe a comment Id as well
if we wanted to look up a very particular comment if you know we imagine we had comments so that harams
object will contain all the different wildcard values that exist inside of our given you are.
In this case we only have the ideal one and so of course we're just saying yep we just want to get access
to the ID out of you or else again we need to make sure that this idea gets passed to fetch post-strike
here.
I think that would be appropriate to assign this to a variable.
Right above it.
So do a little bit of destructuring there and then we can say just fetch post with the given ID like
so.
OK so this definitely takes care of fetching a individual post of telling that action creator hey I
want a post with this given ID.
Now going back to the map state to prop's we had said oh yeah this post object right here.
This is the big old list of posts.
It's the big object that contains all the different posts inside of our application.
So you might be thinking OK well you know let's just use map state to prop's the way we always have.
We can say return post right here.
And then inside of the render function because post is the big list of posts we might do something like
posts with this doc props doc Match.com Priam's dot ID and that would result in the post we want to
show.
So you might be thinking yeah lets just use map see to prop's in a similar way there were always used
to.
No big deal just go for it.
But you know what.
This time around we're going to do things just a little bit differently because I want to show you a
little trick that's going to clean up a lot of the logic inside of your component and enabling you to
write them in a little bit more reusable fashion.
So right now you could really say that our posts show component has a dependency on the huge object
of all the different posts that exist inside of our application.
It really does like this line right here.
This clearly is expecting that we're going to get that huge list of posts right.
Without a doubt.
However the component really only cares about a very particular post only one individual individual
single post.
So rather than passing the big list of posts into this component I'm going to suggest that we figure
out a way instead to only pass in a single post just the one that we care about.
OK so that's the goal here.
I want to say I don't want to make this component rely on a big list of posts.
I want it to always expect to receive one single component so I'm going to clean up this line of code
right here and I'm going to clean up the return statement inside of map state to prop's as well.
OK so here's the trick.
Here's what we're going to do to make this a little bit more usable.
Here's our map state to prop's function and we've said so many times nonstop that the first argument
to it is our application state but there is a second argument.
The second argument is referred to by convention as own props.
So by convention we call it own prop's own props right here is the prop's object that is headed or going
to this component right here.
So when ever this component is about to be rendered or rendered on the screen remember map state to
prop's gets called to figure out what props the component needs and map state to prop's is passed all
the props that were headed to post show to put that another way we could say essentially inside of here.
This props is absolutely equal to own props.
So of course the scoping here doesn't quite work out but just to make make it really clear this not
props is absolutely equal to own props right here.
So if you take that in consideration then rather than returning the big list of posts right here we
can return just the single post that we care about which would be Post's own props match.
Harams dot ID.
So now our component is only ever going to receive the single post that we care about just this one
post and not the big list.
Now you might be saying Stephen that's so ridiculous we talk about here we still are dealing with a
big list of posts inside of this component right here.
Right we're still dealing with the lidless supposed inside the map state to prop's What's the difference.
Well there is a difference in many large applications.
It's not entirely uncommon to create your map state to prop's functions in a separate file so have a
completely separate map state to prop's function completely separate from the actual component.
If we had taken that type of approach inside of this application and said made map state to props and
a second file and this file would only contain post-show.
Well then that's way more reasonable to say yeah this thing starts to get way more reusable.
All sudden post show can be responsible for just showing a component and really doing not much else.
And so it doesn't have that additional data dependency of getting the big list of posts.
And if nothing else it helps to just clean up the actual component right here.
And I think that it kind of lessens the mental burden of remembering oh yeah OK that's a big list suppose
I need to just access the one I really care about.
So maybe if our render method needed to refer to the post we could say this doc Propst up post right
here and if we had like a helper function we could just say this stop prop's post which is way more
compact than doing something like you know something like this in both locations far more compact far
more legible than the other approach.
So really the full approach I'm sorry would have been something a little bit more like that.
Yes.
OK there we go.
So far more legible to just say this stuff props up post as opposed to doing this look up every single
time inside the component.
OK so a little bit of a side there I know I kind of went off the rails but again this is a very important
technique to be aware of that you can really use map state to prop's not just to select little pieces
of State of the global state objects but also to do some intermediate calculation of sorts inside as
well.
So last step we have to do we have to pass in map state to props to the connect function.
There we go.
Now no section has gone on awfully long solicit.
Quick break and we're going to come back and make sure we show some details off of this very particular
post inside of our component.
So see in just a second.
Oh you know what I just realized i think i put a little typo in here I got a semi colon at the end of
the render function right there.
My mistake.
So clean that up.
OK.
So that's better.
Now C-A in the next section.