1
00:00:00,750 --> 00:00:01,583
Instructor: In the last section,

2
00:00:01,583 --> 00:00:03,630
we started talking about higher order components.

3
00:00:03,630 --> 00:00:05,867
We'll now continue by discussing a higher order component

4
00:00:05,867 --> 00:00:07,619
that I can almost guarantee you

5
00:00:07,619 --> 00:00:11,370
you have used already inside of a Redux application.

6
00:00:11,370 --> 00:00:13,224
So let's get to it.

7
00:00:13,224 --> 00:00:16,200
When we were working back on our testing application,

8
00:00:16,200 --> 00:00:19,050
I very briefly showed you this diagram to give you an idea

9
00:00:19,050 --> 00:00:21,900
of how that connect function was working

10
00:00:21,900 --> 00:00:24,767
with that provider tag to give our components access

11
00:00:24,767 --> 00:00:27,900
to data inside the Redux Store.

12
00:00:27,900 --> 00:00:30,900
In this diagram right here, this Connect function,

13
00:00:30,900 --> 00:00:32,340
the Connect function itself,

14
00:00:32,340 --> 00:00:35,817
it is an example of a higher order component.

15
00:00:35,817 --> 00:00:38,310
So every single time that you've been importing

16
00:00:38,310 --> 00:00:40,246
that Connect function from React Redux

17
00:00:40,246 --> 00:00:42,870
and using it to give a component access

18
00:00:42,870 --> 00:00:45,060
to data stored inside of your Redux store,

19
00:00:45,060 --> 00:00:48,600
you have been using a higher order component already.

20
00:00:48,600 --> 00:00:50,970
So in this example, we are making use

21
00:00:50,970 --> 00:00:53,580
of Connect as a higher order component, as a way

22
00:00:53,580 --> 00:00:56,430
of sharing some code that's already been written inside

23
00:00:56,430 --> 00:01:00,030
of a open source library with our components.

24
00:01:00,030 --> 00:01:01,518
You and I could have just as easily,

25
00:01:01,518 --> 00:01:05,160
well maybe not quite as easily, written out all the code

26
00:01:05,160 --> 00:01:09,480
inside that connect function directly into our component.

27
00:01:09,480 --> 00:01:12,390
So inside of our comment box and our comment list,

28
00:01:12,390 --> 00:01:14,340
you and I could have written out a whole bunch

29
00:01:14,340 --> 00:01:17,639
of code that would attempt to reach up to the provider tag

30
00:01:17,639 --> 00:01:21,139
and get access to data inside the Redux store.

31
00:01:21,139 --> 00:01:23,610
But you and I probably don't want to write out

32
00:01:23,610 --> 00:01:25,980
all that code manually ourselves.

33
00:01:25,980 --> 00:01:27,750
So rather than writing out that code manually,

34
00:01:27,750 --> 00:01:29,455
we made use of code reuse

35
00:01:29,455 --> 00:01:33,898
through these higher order components of the Connect tags.

36
00:01:33,898 --> 00:01:35,280
So that's a great example

37
00:01:35,280 --> 00:01:36,900
of higher order components that we've already

38
00:01:36,900 --> 00:01:38,318
been making use of.

39
00:01:38,318 --> 00:01:40,530
Now, of course, that doesn't really tell you how

40
00:01:40,530 --> 00:01:42,056
to make higher order components

41
00:01:42,056 --> 00:01:44,430
or how we actually put them together.

42
00:01:44,430 --> 00:01:45,960
So let's take another quick pause.

43
00:01:45,960 --> 00:01:47,490
We're gonna come back the next section

44
00:01:47,490 --> 00:01:49,650
and we're gonna start talking about an application you

45
00:01:49,650 --> 00:01:52,149
and I are going to build to give you a better idea

46
00:01:52,149 --> 00:01:55,980
of how we put higher order components together ourselves.

47
00:01:55,980 --> 00:01:58,403
So quick break, and I'll see you in just a minute.