1
00:00:00,420 --> 00:00:02,440
In the last video we got our application working.

2
00:00:02,500 --> 00:00:04,260
But there's one quick little improvement.

3
00:00:04,270 --> 00:00:06,670
I want to make to our user Hetter a component.

4
00:00:06,700 --> 00:00:11,680
Now this is a very small thing and it's going to appear really small in this case but it's something

5
00:00:11,680 --> 00:00:16,360
that over time as you start to work on more complicated applications is going to become more and more

6
00:00:16,450 --> 00:00:17,250
useful.

7
00:00:17,250 --> 00:00:20,460
All right so let me show you what it is inside of our user head or component.

8
00:00:20,490 --> 00:00:23,640
We are passing this thing a collection of different props.

9
00:00:23,710 --> 00:00:29,980
Right now this thing gets access to the user ID and it also gets access to the entire list of users.

10
00:00:29,980 --> 00:00:32,010
Now I want to point out something here really quickly.

11
00:00:32,170 --> 00:00:39,400
The user Hetrick component is not really well-suited to take the entire array of users.

12
00:00:39,400 --> 00:00:43,380
That might sound like a really weird thing to say but essentially the entire purpose of the user Hetter

13
00:00:43,390 --> 00:00:47,930
component is to show one singular user on the screen.

14
00:00:48,100 --> 00:00:53,710
It only has to show one user but we're giving it way more data than it ever needs we are giving it the

15
00:00:53,710 --> 00:00:56,230
entire list of users.

16
00:00:56,230 --> 00:01:01,990
And so to make this component by itself like just this class right here a little bit more reusable I

17
00:01:01,990 --> 00:01:05,750
think that it would be a lot better if we could figure out some way to pass it.

18
00:01:05,830 --> 00:01:11,350
Just the user that it cares about like maybe the ID that it cares about and the user that it cares about

19
00:01:11,500 --> 00:01:14,080
but definitely not the big array.

20
00:01:14,080 --> 00:01:19,450
So to do so there's a couple of different approaches we could take we could either get our entire list

21
00:01:19,450 --> 00:01:24,730
of users inside of Post's list and then every single time that we render the user had a right year we

22
00:01:24,730 --> 00:01:29,980
could go through that find logic and attempt to just pass in the user that we care about as opposed

23
00:01:29,980 --> 00:01:31,630
to this user ID.

24
00:01:31,720 --> 00:01:34,340
But I want to show you one other approach that we could take.

25
00:01:36,060 --> 00:01:41,120
Back inside of my user head or component I'm going to go down to the map state to prop's function.

26
00:01:41,130 --> 00:01:42,630
All right mount stage props right here.

27
00:01:42,840 --> 00:01:48,540
Now you might notice that this map state to prop's function seems just like a little bit unnecessary.

28
00:01:48,570 --> 00:01:49,120
Right.

29
00:01:49,170 --> 00:01:53,910
Like every time we want to pull some data out of a component we have to define this really repetitive

30
00:01:53,910 --> 00:01:57,020
function and then have to build up this object right here.

31
00:01:57,150 --> 00:01:59,840
That gets some data out of our store.

32
00:01:59,940 --> 00:02:05,490
Another way that would have been really nice to pull data out did the redux store then have to define

33
00:02:05,490 --> 00:02:06,390
this whole function.

34
00:02:06,390 --> 00:02:07,750
You can't do this to be clear.

35
00:02:07,800 --> 00:02:12,660
You can't do this what I'm about to show you is not valid but it would have been nice if we could just

36
00:02:12,660 --> 00:02:15,100
like pass in a string of something like.

37
00:02:15,170 --> 00:02:20,910
Users like so and then just say that connect should understand that we want to pull the user's property

38
00:02:20,910 --> 00:02:26,750
off the state object and pass it into our component as a prop called users.

39
00:02:26,820 --> 00:02:27,310
Right.

40
00:02:27,330 --> 00:02:30,420
That would have been kind of cool if we could have just done that but instead we have to go through

41
00:02:30,420 --> 00:02:35,820
this really long definition of map state to prop's So it turns out that there's actually kind of a reason

42
00:02:35,820 --> 00:02:36,660
for that.

43
00:02:36,690 --> 00:02:42,450
The reason that we defined map states right here is so that we can do kind of like these pre calculations

44
00:02:42,720 --> 00:02:46,930
on values that are coming into our phone as props and our redux state.

45
00:02:47,070 --> 00:02:52,830
So rather than passing in like a ton of data to our component and relying upon the component to figure

46
00:02:52,830 --> 00:02:58,560
out how to find the user that we care about we could instead extract all that logic to the map state

47
00:02:58,560 --> 00:02:59,730
to prop's function.

48
00:03:01,180 --> 00:03:06,610
So rather than going through this find operation inside the components self right that logic out inside

49
00:03:06,610 --> 00:03:07,900
of map state to.

50
00:03:08,020 --> 00:03:12,190
Now like I said that probably sounds like a very very small distinction.

51
00:03:12,220 --> 00:03:13,980
You know I just told you two seconds ago.

52
00:03:14,110 --> 00:03:18,460
Yeah you know it be nice to make this component more usable and it would be more reusable if we did

53
00:03:18,460 --> 00:03:20,710
not have to pass that the entire list of users.

54
00:03:20,770 --> 00:03:22,180
But then as the solution.

55
00:03:22,200 --> 00:03:27,760
I'm saying that we're basically just going to relocate that logic to a couple lines down inside this

56
00:03:27,760 --> 00:03:28,560
file.

57
00:03:28,700 --> 00:03:32,710
So it might sound like that's no increase in re-usability at all.

58
00:03:32,920 --> 00:03:37,260
Well let me tell you why this kind of technically is an increase in reusability.

59
00:03:37,330 --> 00:03:43,630
It turns out that in some applications like some professional applications some engineers decide to

60
00:03:43,630 --> 00:03:50,380
define this map state to proper function and this stuff right here inside of a separate file.

61
00:03:50,500 --> 00:03:55,910
So you might have one file that has mapped state to props and the initial connect set up right here

62
00:03:56,200 --> 00:04:00,020
and then in a different file you will define the component by itself.

63
00:04:00,250 --> 00:04:04,960
The advantage to that is that you will have a component that can be used on its own without having to

64
00:04:04,960 --> 00:04:08,540
reach into the redux store by going through all this work right here.

65
00:04:08,560 --> 00:04:13,660
But then if you want to you can also very easily create a version of that component that will reach

66
00:04:13,660 --> 00:04:16,180
into the redux store and get all of its own data.

67
00:04:16,180 --> 00:04:21,640
In addition if you ever have another component that needs to get access to say just one particular user

68
00:04:21,820 --> 00:04:27,670
given only a user ID we could easily write map state to props and this connect stuff into a separate

69
00:04:27,670 --> 00:04:31,840
file and then reuse it in multiple components inside of our application.

70
00:04:31,840 --> 00:04:36,910
So like I said it probably doesn't seem like this is going to be any increase in reusability of our

71
00:04:36,910 --> 00:04:42,460
component but in the long run in some applications you're going to find that this is kind of a common

72
00:04:42,460 --> 00:04:46,320
pattern to extract a lot of logic into map stage props.

73
00:04:47,250 --> 00:04:47,480
OK.

74
00:04:47,500 --> 00:04:48,260
So enough talking.

75
00:04:48,260 --> 00:04:49,620
I think you probably get the idea.

76
00:04:49,640 --> 00:04:54,140
So essentially rather than finding the appropriate user inside of our component we want to find the

77
00:04:54,140 --> 00:04:56,710
appropriate user inside of map stage props.

78
00:04:56,720 --> 00:05:02,510
So to do so I'm going to remove this fine statement right here entirely.

79
00:05:02,510 --> 00:05:06,770
We're going to replace it in just a second and we're going to instead place the find statement inside

80
00:05:06,770 --> 00:05:08,040
of Mount St. to.

81
00:05:08,240 --> 00:05:10,080
So I will say St..

82
00:05:10,100 --> 00:05:20,580
Users find and then for every user inside there I want to look at the user id and compare it to oh wait

83
00:05:21,410 --> 00:05:23,230
oh that's a little bit of an issue.

84
00:05:23,970 --> 00:05:32,520
Right here we want to find a user ID that is equal to this component's prop of user ID but that Propp

85
00:05:32,520 --> 00:05:34,580
is only available inside that component.

86
00:05:34,590 --> 00:05:38,520
We can't get access to it inside a map stage props or can we.

87
00:05:38,520 --> 00:05:39,780
Well it turns out we can.

88
00:05:39,960 --> 00:05:46,980
So maps to prop's does not only get cold with our state object out of our redux store as an argument

89
00:05:47,250 --> 00:05:54,410
it actually gets a second argument as well that is referred to as own props this own props object right

90
00:05:54,420 --> 00:06:01,440
here is a copy not actually a copy is a reference to the props that are about to be sent into this component

91
00:06:01,440 --> 00:06:02,790
right here.

92
00:06:02,790 --> 00:06:07,260
So if we ever want to do some of these like pre calculation steps so that we don't have to pass in a

93
00:06:07,260 --> 00:06:12,300
ton of data directly to the components we can reference the props that are about to go into the components

94
00:06:12,360 --> 00:06:13,540
on this object right here.

95
00:06:13,590 --> 00:06:16,240
And then we get our redux state on the first argument.

96
00:06:16,260 --> 00:06:26,070
So essentially we're going to compare user ID with own props dots user id like so and that's pretty

97
00:06:26,070 --> 00:06:26,810
much it.

98
00:06:27,000 --> 00:06:30,460
Well actually just a little bit more that's going to find the appropriate user.

99
00:06:30,750 --> 00:06:33,800
We don't really want to assign that to a property called users anymore.

100
00:06:33,810 --> 00:06:36,070
We probably want to assign that to a property called user.

101
00:06:36,080 --> 00:06:37,380
So we'll update that.

102
00:06:37,620 --> 00:06:44,660
And then finally inside my render method we no longer have access to the Propst users value.

103
00:06:44,670 --> 00:06:50,580
Instead it's simply this stop Propst users Cingular because now we are only passing on the one user

104
00:06:50,580 --> 00:06:52,540
that we care about to our components.

105
00:06:52,590 --> 00:06:58,950
So instead of my render method I'm going to do structure off just that user from my prop's object.

106
00:06:58,950 --> 00:07:01,980
And so now we can check to see if that user exists.

107
00:07:01,980 --> 00:07:04,360
If they don't we'll return NULL and show nothing on the screen.

108
00:07:04,380 --> 00:07:09,510
But if they do we'll show their name inside that div OK.

109
00:07:09,520 --> 00:07:15,820
So again the entire idea here is that we can extract anything that is going to do some computation on

110
00:07:15,820 --> 00:07:21,300
our state our redux States and the prop's coming into our component to the map states prop's function.

111
00:07:21,340 --> 00:07:24,310
And that's really what map state to props is for.

112
00:07:24,310 --> 00:07:28,420
All right so let's save this and then we'll test it out really quickly and just make sure that everything

113
00:07:28,420 --> 00:07:30,790
still works and it looks like yes it does.

114
00:07:30,790 --> 00:07:33,120
I still see all my authors on here.

115
00:07:33,460 --> 00:07:33,780
OK.

116
00:07:33,830 --> 00:07:35,190
So that's a good refactor.

117
00:07:35,280 --> 00:07:36,680
Now I'll take a quick pause right here.

118
00:07:36,700 --> 00:07:37,860
When we come back the next section.

119
00:07:37,870 --> 00:07:42,410
Remember I'd said very mysteriously that there's still a little bit of a problem inside of her.

120
00:07:42,430 --> 00:07:46,850
So let's take a quick pause come back the next video and I'll show you exactly what that problem is.