1
00:00:00,930 --> 00:00:01,920
Instructor: So we just started off

2
00:00:01,920 --> 00:00:03,810
with doing a quick introduction

3
00:00:03,810 --> 00:00:05,100
to higher-order components

4
00:00:05,100 --> 00:00:07,590
and we installed our boiler plate package.

5
00:00:07,590 --> 00:00:09,453
I'm gonna open my code editor,

6
00:00:12,960 --> 00:00:17,940
let me pull it on the screen, very good.

7
00:00:17,940 --> 00:00:20,160
So I mentioned at the end of the last section

8
00:00:20,160 --> 00:00:22,260
that you have already been using

9
00:00:22,260 --> 00:00:25,320
higher-order components without really realizing it.

10
00:00:25,320 --> 00:00:26,880
And once I tell you about it,

11
00:00:26,880 --> 00:00:28,830
it's gonna start to make a little bit of sense

12
00:00:28,830 --> 00:00:29,970
if you're still not familiar

13
00:00:29,970 --> 00:00:32,732
with exactly what a higher-order component is doing.

14
00:00:33,600 --> 00:00:35,160
So in my boilerplate package,

15
00:00:35,160 --> 00:00:37,230
I'm gonna open up my components directory

16
00:00:37,230 --> 00:00:39,480
and then open the app component.

17
00:00:39,480 --> 00:00:40,620
So let's play a little bit

18
00:00:40,620 --> 00:00:42,510
of make-believe here for a second.

19
00:00:42,510 --> 00:00:44,400
And let's assume that we are in the middle

20
00:00:44,400 --> 00:00:47,370
of a existing really large application

21
00:00:47,370 --> 00:00:48,660
where we want to get access

22
00:00:48,660 --> 00:00:50,340
to some piece of Redux State

23
00:00:50,340 --> 00:00:52,350
on top of our App component.

24
00:00:52,350 --> 00:00:56,400
So in other words, we wanna turn App into a container.

25
00:00:56,400 --> 00:00:58,110
What would be the process that we would go through

26
00:00:58,110 --> 00:01:00,720
to promote a component to a container?

27
00:01:00,720 --> 00:01:04,230
Well, we wrap it with the connect function, right?

28
00:01:04,230 --> 00:01:07,260
The connect function from React Redux.

29
00:01:07,260 --> 00:01:08,370
Let's do that really quick

30
00:01:08,370 --> 00:01:11,190
and just see what kind of happens.

31
00:01:11,190 --> 00:01:14,280
I'm going to import connect

32
00:01:14,280 --> 00:01:18,810
from react-redux at the top.

33
00:01:18,810 --> 00:01:20,400
I didn't mention it, but I just pulled off

34
00:01:20,400 --> 00:01:23,160
the export default on the class right here.

35
00:01:23,160 --> 00:01:25,773
And I'm gonna put the export default at the bottom,

36
00:01:27,510 --> 00:01:30,510
and then we will connect App.

37
00:01:30,510 --> 00:01:34,277
And finally, I will add function mapStateToProps.

38
00:01:37,080 --> 00:01:38,250
And let's just assume

39
00:01:38,250 --> 00:01:41,160
that we are going to return some property called...

40
00:01:41,160 --> 00:01:44,067
How about "posts: state.posts"?

41
00:01:45,990 --> 00:01:50,990
Then we'll pass mapStateToProps to connect.

42
00:01:51,030 --> 00:01:53,010
So, I have said several times now

43
00:01:53,010 --> 00:01:54,720
you've been using higher-order components

44
00:01:54,720 --> 00:01:56,820
without really realizing it.

45
00:01:56,820 --> 00:01:59,010
This connect function right here

46
00:01:59,010 --> 00:02:01,410
is a higher-order component.

47
00:02:01,410 --> 00:02:05,010
So we call connect with some configuration option

48
00:02:05,010 --> 00:02:07,350
and then whatever gets returned from connect,

49
00:02:07,350 --> 00:02:10,380
we immediately invoke again with our component.

50
00:02:10,380 --> 00:02:13,800
So this is a classic case of a higher-order component.

51
00:02:13,800 --> 00:02:16,590
We're taking the React component we created

52
00:02:16,590 --> 00:02:18,720
and we are wrapping it or enhancing

53
00:02:18,720 --> 00:02:21,090
or composing its functionality

54
00:02:21,090 --> 00:02:23,010
with some helper here.

55
00:02:23,010 --> 00:02:23,843
And so you might be saying,

56
00:02:23,843 --> 00:02:25,440
"Okay, well what the heck is...

57
00:02:25,440 --> 00:02:26,760
What is Connect even doing there?

58
00:02:26,760 --> 00:02:28,380
How is it enhancing our store,

59
00:02:28,380 --> 00:02:29,367
what is it doing?"

60
00:02:30,270 --> 00:02:32,640
So this is where things start to get really interesting

61
00:02:32,640 --> 00:02:34,260
and we're gonna talk about that question

62
00:02:34,260 --> 00:02:37,050
that might have been burning in your mind all this time,

63
00:02:37,050 --> 00:02:38,910
what is the provider up here?

64
00:02:38,910 --> 00:02:41,010
What is the purpose of the provider?

65
00:02:41,010 --> 00:02:44,103
How do higher-order components get involved with this?

66
00:02:45,600 --> 00:02:47,250
I'm gonna pull a diagram on the screen

67
00:02:47,250 --> 00:02:49,443
to help answer that question.

68
00:02:53,040 --> 00:02:53,940
So here's a diagram

69
00:02:53,940 --> 00:02:55,590
of what's going on behind the scenes

70
00:02:55,590 --> 00:02:57,870
when we create a provider

71
00:02:57,870 --> 00:03:01,200
and we connect some child components.

72
00:03:01,200 --> 00:03:03,570
What's happening is the connect

73
00:03:03,570 --> 00:03:05,310
is a higher-order component

74
00:03:05,310 --> 00:03:07,230
that is specifically made

75
00:03:07,230 --> 00:03:09,420
to make communication with the provider

76
00:03:09,420 --> 00:03:11,820
at the top of our application.

77
00:03:11,820 --> 00:03:14,340
The provider wraps the Redux store,

78
00:03:14,340 --> 00:03:17,220
which is Redux the actual library,

79
00:03:17,220 --> 00:03:18,360
it's the object that holds

80
00:03:18,360 --> 00:03:20,190
our global application state

81
00:03:20,190 --> 00:03:23,430
that is formed by all of our different reducers.

82
00:03:23,430 --> 00:03:25,590
The provider holds the Redux store

83
00:03:25,590 --> 00:03:28,387
and it watches the Redux Store very directly says,

84
00:03:28,387 --> 00:03:31,140
"Hey, Redux store, whenever you change,

85
00:03:31,140 --> 00:03:32,220
I want you to tell me,

86
00:03:32,220 --> 00:03:34,320
just tell me whenever you change."

87
00:03:34,320 --> 00:03:36,330
That's the job of the provider.

88
00:03:36,330 --> 00:03:38,850
Then whenever the Redux store changes,

89
00:03:38,850 --> 00:03:40,717
the provider takes notice of it and it says,

90
00:03:40,717 --> 00:03:43,110
"Okay, new state, something new just happened,

91
00:03:43,110 --> 00:03:44,670
I need to go and update

92
00:03:44,670 --> 00:03:47,070
any child components that I have."

93
00:03:47,070 --> 00:03:49,410
So provider broadcasts down

94
00:03:49,410 --> 00:03:51,607
to any connected component,

95
00:03:51,607 --> 00:03:54,450
"Hey, there is just some change to the Redux state,

96
00:03:54,450 --> 00:03:55,800
something just happened

97
00:03:55,800 --> 00:03:58,260
and here's what the new state is.

98
00:03:58,260 --> 00:03:59,910
Take it re-render yourself,

99
00:03:59,910 --> 00:04:01,110
do whatever you want with it,

100
00:04:01,110 --> 00:04:03,150
here's the new state."

101
00:04:03,150 --> 00:04:05,700
So connect is a higher-order component

102
00:04:05,700 --> 00:04:07,440
that's making direct communication

103
00:04:07,440 --> 00:04:10,230
with the provider inside of our application.

104
00:04:10,230 --> 00:04:12,690
And the provider is what has direct access

105
00:04:12,690 --> 00:04:14,400
to the Redux store.

106
00:04:14,400 --> 00:04:15,900
So this is just one example

107
00:04:15,900 --> 00:04:17,579
of a higher-order component.

108
00:04:17,579 --> 00:04:18,779
It's a higher-order component

109
00:04:18,779 --> 00:04:19,620
where it's being used

110
00:04:19,620 --> 00:04:22,079
to add some additional functionality

111
00:04:22,079 --> 00:04:24,435
or data onto our components,

112
00:04:24,435 --> 00:04:27,600
say comment box or comment list

113
00:04:27,600 --> 00:04:30,510
or back in the code we were just editing,

114
00:04:30,510 --> 00:04:32,100
our app component.

115
00:04:32,100 --> 00:04:34,890
So again, higher-order components

116
00:04:34,890 --> 00:04:38,250
are components that take a component we write,

117
00:04:38,250 --> 00:04:39,660
add some additional data

118
00:04:39,660 --> 00:04:42,180
or some additional functionality to it,

119
00:04:42,180 --> 00:04:44,370
and then returns the newly wrapped

120
00:04:44,370 --> 00:04:46,173
or enhanced component.

121
00:04:47,160 --> 00:04:50,460
So in practice, after we use the connect function here,

122
00:04:50,460 --> 00:04:53,260
we end up exporting by default

123
00:04:54,630 --> 00:04:58,230
the enhanced or composed version of App.

124
00:04:58,230 --> 00:04:59,880
And that's a very common pattern that we'll see.

125
00:04:59,880 --> 00:05:02,100
We'll see that in a lot of the files we write

126
00:05:02,100 --> 00:05:04,320
where we use higher-order components,

127
00:05:04,320 --> 00:05:07,140
we end up exporting the enhanced

128
00:05:07,140 --> 00:05:09,300
or composed version of our apps,

129
00:05:09,300 --> 00:05:10,713
excuse me, our components.

130
00:05:11,850 --> 00:05:15,390
Okay, so I only added the connect library

131
00:05:15,390 --> 00:05:17,610
inside of this component right here as an example.

132
00:05:17,610 --> 00:05:20,733
I'm gonna go ahead and do a very long undo here,

133
00:05:22,680 --> 00:05:25,200
just to get back to where we started,

134
00:05:25,200 --> 00:05:27,000
'cause we're not going to be turning App

135
00:05:27,000 --> 00:05:31,440
into a container inside of this particular application

136
00:05:31,440 --> 00:05:32,910
that we're gonna build.

137
00:05:32,910 --> 00:05:34,530
Okay, so now that we know a little bit more

138
00:05:34,530 --> 00:05:36,120
about what's going on with our provider

139
00:05:36,120 --> 00:05:37,230
and the connect function

140
00:05:37,230 --> 00:05:39,210
and maybe have a little bit better idea

141
00:05:39,210 --> 00:05:41,370
of what's going on with higher-order components,

142
00:05:41,370 --> 00:05:42,810
let's continue the next section

143
00:05:42,810 --> 00:05:45,360
where we'll talk about the app that we're gonna build

144
00:05:45,360 --> 00:05:46,470
to help us understand

145
00:05:46,470 --> 00:05:48,813
what's going on with higher-order components.