1
00:00:00,780 --> 00:00:05,760
In the last section we put together our fetch post action creator and wired it up to our reducer as

2
00:00:05,760 --> 00:00:06,430
well.

3
00:00:06,570 --> 00:00:09,840
We're now going to continue inside of our post show component.

4
00:00:09,840 --> 00:00:14,190
We'll start off by importing the action creator and wiring it up to this component and then we'll make

5
00:00:14,190 --> 00:00:18,160
sure that we can fetch the actual post and display it inside of here as well.

6
00:00:18,540 --> 00:00:20,870
So let's get started at the top.

7
00:00:20,880 --> 00:00:28,980
We'll start off by importing our connect helper from the re-act redox library and we'll also import

8
00:00:28,980 --> 00:00:35,550
the actual creator that we just added in as well which was posts fetch.

9
00:00:35,670 --> 00:00:37,580
Still check that real quick fetch post.

10
00:00:37,590 --> 00:00:38,620
Other way around.

11
00:00:39,060 --> 00:00:47,830
First post from actions now we can hook this up with the connects over to the component self at the

12
00:00:47,830 --> 00:00:54,000
bottom so it can say connect the second set of parentheses we'll go around Post show.

13
00:00:54,310 --> 00:00:57,140
We do not yet have a map state to prop's function.

14
00:00:57,160 --> 00:01:02,440
I definitely expect we will but we definitely do not have one yet so will pass and no as the first argument

15
00:01:02,830 --> 00:01:10,350
and as the second argument will receive that action creator fetch post.

16
00:01:10,350 --> 00:01:12,160
Ok so it looks good.

17
00:01:12,210 --> 00:01:17,200
Now the real question comes down to when exactly do we want to call this action creator.

18
00:01:17,250 --> 00:01:21,370
So we've covered fetching data previously inside of our posts index page.

19
00:01:21,410 --> 00:01:26,970
We have said inside of that component that we would place that data fetching action creator into a component.

20
00:01:26,970 --> 00:01:28,770
Did mt life cycle method.

21
00:01:29,130 --> 00:01:33,570
Remember that component did MT would be automatically called once the component was rendered to the

22
00:01:33,570 --> 00:01:34,450
DOM.

23
00:01:34,470 --> 00:01:38,070
So I think that's a totally appropriate approach to take this time around as well.

24
00:01:39,760 --> 00:01:43,360
So inside a post show will define component.

25
00:01:43,930 --> 00:01:47,020
Did mount and then inside there.

26
00:01:47,050 --> 00:01:48,970
We can call that action creator.

27
00:01:48,970 --> 00:01:53,090
So this prop's fetch post.

28
00:01:53,380 --> 00:01:56,840
Do recall that these life cycle methods have to be spelled correctly.

29
00:01:56,860 --> 00:01:59,960
So make sure that you don't have a typo in the Word component.

30
00:02:00,130 --> 00:02:02,730
That's an extremely common error to make.

31
00:02:02,740 --> 00:02:08,530
Very common to misspelt component accidentally.

32
00:02:08,760 --> 00:02:09,050
All right.

33
00:02:09,060 --> 00:02:13,990
So now the instant this component appears on the screen we're going to reach out and fetch that post.

34
00:02:14,280 --> 00:02:19,800
Presumably the action creator will fetch that post you'll get added to our post piece of state and that

35
00:02:19,800 --> 00:02:25,260
means that we then need to take that post out of our application level state and get it into our component

36
00:02:25,380 --> 00:02:28,800
with a map state to prop's function.

37
00:02:28,800 --> 00:02:33,500
So let's define our map state to prop's function.

38
00:02:35,320 --> 00:02:42,380
Map city prop's will be called with the state object and all we really care about the only proper we

39
00:02:42,380 --> 00:02:47,430
really care about all of here is the post piece of states or the Post property.

40
00:02:47,470 --> 00:02:51,340
So we'll do a little bit of destructuring on the argument object and say hey you might just give me

41
00:02:51,350 --> 00:02:54,630
the list of posts here.

42
00:02:54,690 --> 00:03:00,830
Now the last thing we need to take care of is to recall that we are always trying to fetch a very particular

43
00:03:00,840 --> 00:03:01,820
ID.

44
00:03:02,010 --> 00:03:08,130
So with fecche post up here we want to make sure that we tell this post exactly what ID we're trying

45
00:03:08,130 --> 00:03:12,180
to access or what what post we're trying to get to fetch.

46
00:03:12,300 --> 00:03:17,730
And in the same case down here with map state the props this is the big list of posts and we don't really

47
00:03:17,730 --> 00:03:22,000
want to work with a big list of posts we want to work with a very particular one.

48
00:03:22,200 --> 00:03:30,000
In both cases we need to know about the ID that sits inside the URL because that ID is the very important

49
00:03:30,000 --> 00:03:36,290
piece of state that we really care about that is going to dictate exactly how this component behaves.

50
00:03:37,020 --> 00:03:43,680
So to get access to that you are or the little token that's inside the you are ill I should say we all

51
00:03:43,680 --> 00:03:49,290
make access to a prop from that is provided to us from re-act router.

52
00:03:49,290 --> 00:03:53,810
So up inside the component in Mount we can access this.

53
00:03:53,910 --> 00:03:58,990
Props don't match dot harams dot ID.

54
00:03:59,180 --> 00:04:04,240
So this right here is provided to us directly by re-act router.

55
00:04:04,410 --> 00:04:09,720
Now with re-act router the match right here is the top level property.

56
00:04:09,900 --> 00:04:15,630
The Paramo property that's inside of it is an object that lists all the different wildcard tokens that

57
00:04:15,630 --> 00:04:17,530
exist inside the URL.

58
00:04:17,550 --> 00:04:24,660
So if we go back to the index js file and we find our route's definition we're not only limited to having

59
00:04:24,660 --> 00:04:30,600
one wildcard inside the you are l right here we could just as easily have maybe a comment Id as well

60
00:04:30,660 --> 00:04:36,300
if we wanted to look up a very particular comment if you know we imagine we had comments so that harams

61
00:04:36,300 --> 00:04:42,110
object will contain all the different wildcard values that exist inside of our given you are.

62
00:04:42,360 --> 00:04:47,610
In this case we only have the ideal one and so of course we're just saying yep we just want to get access

63
00:04:47,610 --> 00:04:54,810
to the ID out of you or else again we need to make sure that this idea gets passed to fetch post-strike

64
00:04:54,810 --> 00:04:55,490
here.

65
00:04:55,590 --> 00:04:59,850
I think that would be appropriate to assign this to a variable.

66
00:04:59,880 --> 00:05:01,440
Right above it.

67
00:05:01,440 --> 00:05:06,240
So do a little bit of destructuring there and then we can say just fetch post with the given ID like

68
00:05:06,240 --> 00:05:09,810
so.

69
00:05:10,150 --> 00:05:15,770
OK so this definitely takes care of fetching a individual post of telling that action creator hey I

70
00:05:15,770 --> 00:05:18,430
want a post with this given ID.

71
00:05:18,620 --> 00:05:22,940
Now going back to the map state to prop's we had said oh yeah this post object right here.

72
00:05:22,940 --> 00:05:25,400
This is the big old list of posts.

73
00:05:25,400 --> 00:05:29,930
It's the big object that contains all the different posts inside of our application.

74
00:05:30,050 --> 00:05:35,650
So you might be thinking OK well you know let's just use map state to prop's the way we always have.

75
00:05:35,900 --> 00:05:39,620
We can say return post right here.

76
00:05:39,620 --> 00:05:46,310
And then inside of the render function because post is the big list of posts we might do something like

77
00:05:46,310 --> 00:05:54,320
posts with this doc props doc Match.com Priam's dot ID and that would result in the post we want to

78
00:05:54,320 --> 00:05:57,040
show.

79
00:05:57,150 --> 00:06:01,480
So you might be thinking yeah lets just use map see to prop's in a similar way there were always used

80
00:06:01,480 --> 00:06:01,690
to.

81
00:06:01,690 --> 00:06:03,380
No big deal just go for it.

82
00:06:03,910 --> 00:06:04,480
But you know what.

83
00:06:04,510 --> 00:06:08,500
This time around we're going to do things just a little bit differently because I want to show you a

84
00:06:08,500 --> 00:06:13,960
little trick that's going to clean up a lot of the logic inside of your component and enabling you to

85
00:06:13,960 --> 00:06:17,240
write them in a little bit more reusable fashion.

86
00:06:17,860 --> 00:06:24,790
So right now you could really say that our posts show component has a dependency on the huge object

87
00:06:24,880 --> 00:06:28,230
of all the different posts that exist inside of our application.

88
00:06:28,240 --> 00:06:30,490
It really does like this line right here.

89
00:06:30,490 --> 00:06:35,820
This clearly is expecting that we're going to get that huge list of posts right.

90
00:06:35,860 --> 00:06:36,810
Without a doubt.

91
00:06:37,300 --> 00:06:44,830
However the component really only cares about a very particular post only one individual individual

92
00:06:44,830 --> 00:06:46,220
single post.

93
00:06:46,570 --> 00:06:51,910
So rather than passing the big list of posts into this component I'm going to suggest that we figure

94
00:06:51,910 --> 00:06:58,010
out a way instead to only pass in a single post just the one that we care about.

95
00:06:58,040 --> 00:06:59,110
OK so that's the goal here.

96
00:06:59,110 --> 00:07:03,220
I want to say I don't want to make this component rely on a big list of posts.

97
00:07:03,340 --> 00:07:09,070
I want it to always expect to receive one single component so I'm going to clean up this line of code

98
00:07:09,070 --> 00:07:15,780
right here and I'm going to clean up the return statement inside of map state to prop's as well.

99
00:07:15,850 --> 00:07:16,830
OK so here's the trick.

100
00:07:16,840 --> 00:07:19,740
Here's what we're going to do to make this a little bit more usable.

101
00:07:19,990 --> 00:07:25,270
Here's our map state to prop's function and we've said so many times nonstop that the first argument

102
00:07:25,270 --> 00:07:31,530
to it is our application state but there is a second argument.

103
00:07:31,600 --> 00:07:37,770
The second argument is referred to by convention as own props.

104
00:07:37,840 --> 00:07:45,850
So by convention we call it own prop's own props right here is the prop's object that is headed or going

105
00:07:45,850 --> 00:07:49,630
to this component right here.

106
00:07:49,930 --> 00:07:55,270
So when ever this component is about to be rendered or rendered on the screen remember map state to

107
00:07:55,270 --> 00:08:01,240
prop's gets called to figure out what props the component needs and map state to prop's is passed all

108
00:08:01,240 --> 00:08:08,960
the props that were headed to post show to put that another way we could say essentially inside of here.

109
00:08:09,070 --> 00:08:14,460
This props is absolutely equal to own props.

110
00:08:14,650 --> 00:08:19,820
So of course the scoping here doesn't quite work out but just to make make it really clear this not

111
00:08:19,840 --> 00:08:23,810
props is absolutely equal to own props right here.

112
00:08:23,920 --> 00:08:30,190
So if you take that in consideration then rather than returning the big list of posts right here we

113
00:08:30,190 --> 00:08:37,890
can return just the single post that we care about which would be Post's own props match.

114
00:08:38,020 --> 00:08:42,890
Harams dot ID.

115
00:08:42,920 --> 00:08:48,950
So now our component is only ever going to receive the single post that we care about just this one

116
00:08:48,950 --> 00:08:51,190
post and not the big list.

117
00:08:51,200 --> 00:08:55,790
Now you might be saying Stephen that's so ridiculous we talk about here we still are dealing with a

118
00:08:55,790 --> 00:08:58,480
big list of posts inside of this component right here.

119
00:08:58,490 --> 00:09:04,160
Right we're still dealing with the lidless supposed inside the map state to prop's What's the difference.

120
00:09:04,400 --> 00:09:07,550
Well there is a difference in many large applications.

121
00:09:07,550 --> 00:09:14,660
It's not entirely uncommon to create your map state to prop's functions in a separate file so have a

122
00:09:14,690 --> 00:09:20,250
completely separate map state to prop's function completely separate from the actual component.

123
00:09:20,270 --> 00:09:26,150
If we had taken that type of approach inside of this application and said made map state to props and

124
00:09:26,150 --> 00:09:30,240
a second file and this file would only contain post-show.

125
00:09:30,380 --> 00:09:34,750
Well then that's way more reasonable to say yeah this thing starts to get way more reusable.

126
00:09:34,760 --> 00:09:40,420
All sudden post show can be responsible for just showing a component and really doing not much else.

127
00:09:40,520 --> 00:09:45,090
And so it doesn't have that additional data dependency of getting the big list of posts.

128
00:09:45,340 --> 00:09:49,000
And if nothing else it helps to just clean up the actual component right here.

129
00:09:49,040 --> 00:09:53,900
And I think that it kind of lessens the mental burden of remembering oh yeah OK that's a big list suppose

130
00:09:53,960 --> 00:09:57,030
I need to just access the one I really care about.

131
00:09:57,170 --> 00:10:03,260
So maybe if our render method needed to refer to the post we could say this doc Propst up post right

132
00:10:03,260 --> 00:10:11,660
here and if we had like a helper function we could just say this stop prop's post which is way more

133
00:10:11,660 --> 00:10:21,110
compact than doing something like you know something like this in both locations far more compact far

134
00:10:21,110 --> 00:10:26,440
more legible than the other approach.

135
00:10:26,450 --> 00:10:31,440
So really the full approach I'm sorry would have been something a little bit more like that.

136
00:10:31,670 --> 00:10:32,030
Yes.

137
00:10:32,060 --> 00:10:32,660
OK there we go.

138
00:10:32,660 --> 00:10:37,940
So far more legible to just say this stuff props up post as opposed to doing this look up every single

139
00:10:37,940 --> 00:10:41,270
time inside the component.

140
00:10:41,290 --> 00:10:46,170
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

141
00:10:46,170 --> 00:10:51,510
technique to be aware of that you can really use map state to prop's not just to select little pieces

142
00:10:51,510 --> 00:10:56,580
of State of the global state objects but also to do some intermediate calculation of sorts inside as

143
00:10:56,580 --> 00:10:57,960
well.

144
00:10:57,960 --> 00:11:03,540
So last step we have to do we have to pass in map state to props to the connect function.

145
00:11:03,580 --> 00:11:04,350
There we go.

146
00:11:04,490 --> 00:11:07,330
Now no section has gone on awfully long solicit.

147
00:11:07,330 --> 00:11:12,400
Quick break and we're going to come back and make sure we show some details off of this very particular

148
00:11:12,400 --> 00:11:14,500
post inside of our component.

149
00:11:14,500 --> 00:11:16,020
So see in just a second.

150
00:11:16,300 --> 00:11:20,650
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

151
00:11:20,650 --> 00:11:21,720
the render function right there.

152
00:11:21,730 --> 00:11:22,540
My mistake.

153
00:11:22,540 --> 00:11:23,580
So clean that up.

154
00:11:23,930 --> 00:11:24,200
OK.

155
00:11:24,220 --> 00:11:25,050
So that's better.

156
00:11:25,180 --> 00:11:26,830
Now C-A in the next section.