1
00:00:01,320 --> 00:00:02,880
‫Welcome back.

2
00:00:02,880 --> 00:00:06,690
‫So, let's now start using the context API in practice

3
00:00:06,690 --> 00:00:09,210
‫in the Atomic Blog application

4
00:00:09,210 --> 00:00:10,923
‫that you have studied earlier.

5
00:00:12,510 --> 00:00:15,690
‫So, as I said in that challenge lecture,

6
00:00:15,690 --> 00:00:17,220
‫it's extremely important

7
00:00:17,220 --> 00:00:21,180
‫that you got yourself highly familiar with this application,

8
00:00:21,180 --> 00:00:23,400
‫because what we're going to do now,

9
00:00:23,400 --> 00:00:25,500
‫and over the next few lectures

10
00:00:25,500 --> 00:00:29,400
‫is to completely refactor this entire application

11
00:00:29,400 --> 00:00:32,640
‫from having all the prop drilling that you find

12
00:00:32,640 --> 00:00:37,640
‫in this application to using the context API instead.

13
00:00:37,860 --> 00:00:40,890
‫And, we are going to learn about the context API

14
00:00:40,890 --> 00:00:43,080
‫here in this separate project,

15
00:00:43,080 --> 00:00:45,240
‫because this one is a lot simpler

16
00:00:45,240 --> 00:00:47,370
‫than the WorldWise application,

17
00:00:47,370 --> 00:00:48,780
‫and like this,

18
00:00:48,780 --> 00:00:52,020
‫we can learn this very important part of React

19
00:00:52,020 --> 00:00:53,460
‫more in isolation,

20
00:00:53,460 --> 00:00:57,240
‫so that we don't mix many different concepts altogether.

21
00:00:57,240 --> 00:00:59,790
‫But, anyway, that's enough talk.

22
00:00:59,790 --> 00:01:02,070
‫Let's just very quickly go together

23
00:01:02,070 --> 00:01:03,690
‫through this application,

24
00:01:03,690 --> 00:01:05,823
‫just so we are all on the same page.

25
00:01:06,750 --> 00:01:09,180
‫So, as the application loads,

26
00:01:09,180 --> 00:01:12,150
‫we create these 30 random posts

27
00:01:12,150 --> 00:01:15,060
‫and store them into the posts' array.

28
00:01:15,060 --> 00:01:17,370
‫So, remember that this callback function here

29
00:01:17,370 --> 00:01:21,450
‫only runs on the initial renderer, right?

30
00:01:21,450 --> 00:01:24,180
‫Then, here, the posts are actually filtered

31
00:01:24,180 --> 00:01:28,860
‫by the search query that we can type up here.

32
00:01:28,860 --> 00:01:30,510
‫So, if we type fire,

33
00:01:30,510 --> 00:01:34,980
‫then only these posts here that have fire in the title

34
00:01:34,980 --> 00:01:37,083
‫or in the text will show up.

35
00:01:38,850 --> 00:01:42,330
‫Alright, and what else do we have?

36
00:01:42,330 --> 00:01:44,670
‫Then, we have, yeah, two event handler functions here

37
00:01:44,670 --> 00:01:49,020
‫to add a new post and to clear all the posts.

38
00:01:49,020 --> 00:01:52,620
‫And, then we pass all of that stuff here as props

39
00:01:52,620 --> 00:01:54,780
‫into these multiple components.

40
00:01:54,780 --> 00:01:57,960
‫And, some of it really is prop drilling,

41
00:01:57,960 --> 00:02:00,000
‫because, for example, here,

42
00:02:00,000 --> 00:02:03,420
‫the header doesn't even need this post's prop,

43
00:02:03,420 --> 00:02:05,910
‫but all it does is to pass this data

44
00:02:05,910 --> 00:02:07,920
‫right into the next component.

45
00:02:07,920 --> 00:02:10,260
‫So, result in this case.

46
00:02:10,260 --> 00:02:13,200
‫And, the same thing for these other props here.

47
00:02:13,200 --> 00:02:16,050
‫So, this component doesn't really need these props,

48
00:02:16,050 --> 00:02:18,780
‫at least not these three here.

49
00:02:18,780 --> 00:02:21,090
‫All it does is to pass them down.

50
00:02:21,090 --> 00:02:23,883
‫And, so that's what we mean by prop drilling.

51
00:02:24,870 --> 00:02:28,590
‫Now, let's also take a look at the component tree here.

52
00:02:28,590 --> 00:02:32,313
‫As always, that's extremely important.

53
00:02:33,600 --> 00:02:34,620
‫And, so, for example,

54
00:02:34,620 --> 00:02:37,830
‫here we can see that this list component

55
00:02:37,830 --> 00:02:40,980
‫is one of the components that needs the posts.

56
00:02:40,980 --> 00:02:43,920
‫And, so for that, we need to pass the posts from app,

57
00:02:43,920 --> 00:02:48,000
‫to main, to posts, and then to lists.

58
00:02:48,000 --> 00:02:51,573
‫So, a huge chain of prop drilling right there.

59
00:02:53,430 --> 00:02:56,310
‫Now, alright, then down here we have some more code,

60
00:02:56,310 --> 00:02:58,530
‫which is not really relevant,

61
00:02:58,530 --> 00:03:00,090
‫and especially not this one.

62
00:03:00,090 --> 00:03:03,720
‫So, the archive here is not really important.

63
00:03:03,720 --> 00:03:06,420
‫Again, we will mostly use that

64
00:03:06,420 --> 00:03:08,880
‫for some other thing even later,

65
00:03:08,880 --> 00:03:10,443
‫so even in another section.

66
00:03:11,520 --> 00:03:13,530
‫But, anyway, let's now start

67
00:03:13,530 --> 00:03:15,990
‫to solving this prop drilling problem

68
00:03:15,990 --> 00:03:19,623
‫and learn how the context API works in practice.

69
00:03:20,490 --> 00:03:22,680
‫So, remember from the last video

70
00:03:22,680 --> 00:03:26,790
‫that basically the context API has three parts.

71
00:03:26,790 --> 00:03:29,670
‫There is a provider, there is a value,

72
00:03:29,670 --> 00:03:32,130
‫and then there are all the consumer components,

73
00:03:32,130 --> 00:03:35,490
‫which will read the value from the context.

74
00:03:35,490 --> 00:03:38,310
‫And, so let's start with the first step,

75
00:03:38,310 --> 00:03:40,233
‫which is to create the provider.

76
00:03:41,580 --> 00:03:43,230
‫So, in order to do that,

77
00:03:43,230 --> 00:03:46,410
‫we first need to create a new context.

78
00:03:46,410 --> 00:03:49,110
‫So, for that, we call createContext,

79
00:03:51,360 --> 00:03:54,660
‫which is a function that is included in React.

80
00:03:54,660 --> 00:03:57,930
‫So, just like use state or use effect.

81
00:03:57,930 --> 00:04:02,930
‫So, make sure that it got imported here from React.

82
00:04:03,030 --> 00:04:05,580
‫Now, into this create context function,

83
00:04:05,580 --> 00:04:09,900
‫we could pass in a default value for this context.

84
00:04:09,900 --> 00:04:12,570
‫However, we usually never do that,

85
00:04:12,570 --> 00:04:16,230
‫because that value cannot change over time.

86
00:04:16,230 --> 00:04:19,500
‫And, so it's actually pretty useless.

87
00:04:19,500 --> 00:04:22,710
‫So, instead we usually pass in null

88
00:04:22,710 --> 00:04:25,473
‫or we just leave this empty altogether.

89
00:04:26,580 --> 00:04:30,780
‫But, anyway, calling createContext will return,

90
00:04:30,780 --> 00:04:33,750
‫as the name says, a context.

91
00:04:33,750 --> 00:04:38,580
‫So, let's call this a post context in this case,

92
00:04:38,580 --> 00:04:41,550
‫because here we are going to store the information

93
00:04:41,550 --> 00:04:42,543
‫about posts.

94
00:04:44,340 --> 00:04:46,860
‫Now, this turned blue here,

95
00:04:46,860 --> 00:04:49,080
‫because that's our fake dark mode,

96
00:04:49,080 --> 00:04:51,300
‫which maybe you have also discovered

97
00:04:51,300 --> 00:04:53,433
‫while going through this application.

98
00:04:54,600 --> 00:04:55,860
‫Now, notice how, here,

99
00:04:55,860 --> 00:04:57,930
‫the variable name actually starts

100
00:04:57,930 --> 00:04:59,970
‫with an uppercase letter.

101
00:04:59,970 --> 00:05:01,410
‫And, so the reason for that

102
00:05:01,410 --> 00:05:04,983
‫is that this is actually basically a component.

103
00:05:05,830 --> 00:05:08,160
‫And, so components always use here

104
00:05:08,160 --> 00:05:11,040
‫the uppercase letter at the beginning.

105
00:05:11,040 --> 00:05:13,890
‫So, let's just write out what we just did.

106
00:05:13,890 --> 00:05:15,720
‫So, our three steps,

107
00:05:15,720 --> 00:05:20,720
‫the first one is to create a new context,

108
00:05:20,970 --> 00:05:22,740
‫so we have our context now,

109
00:05:22,740 --> 00:05:26,673
‫and now we can pass the value into the context provider.

110
00:05:28,771 --> 00:05:32,220
‫So, let's then go right here into our JSX,

111
00:05:32,220 --> 00:05:36,090
‫because this is where we are going to use that component.

112
00:05:36,090 --> 00:05:38,880
‫And, let's actually make it the parent component

113
00:05:38,880 --> 00:05:42,510
‫of all of these ones right here.

114
00:05:42,510 --> 00:05:45,093
‫So, let's place it really outside here.

115
00:05:46,170 --> 00:05:49,440
‫So, post context, and now on there,

116
00:05:49,440 --> 00:05:52,173
‫we read or we get the .providerproperty.

117
00:05:55,080 --> 00:05:56,760
‫Then, we close that.

118
00:05:56,760 --> 00:06:00,270
‫And, then we need to of course place this here

119
00:06:00,270 --> 00:06:01,293
‫at the very end.

120
00:06:02,940 --> 00:06:05,823
‫So, right here and there we go.

121
00:06:06,660 --> 00:06:08,550
‫Now, this on its own, of course,

122
00:06:08,550 --> 00:06:10,140
‫doesn't do anything yet,

123
00:06:10,140 --> 00:06:13,560
‫because now what we need to do is to pass the value

124
00:06:13,560 --> 00:06:15,360
‫into this provider.

125
00:06:15,360 --> 00:06:17,913
‫And, so this is basically the second step.

126
00:06:19,491 --> 00:06:23,767
‫So, the second step is to provide value

127
00:06:24,810 --> 00:06:27,303
‫to the child components.

128
00:06:31,440 --> 00:06:32,820
‫So, to do that,

129
00:06:32,820 --> 00:06:37,530
‫here we specify the value prop on this component,

130
00:06:37,530 --> 00:06:39,630
‫and then we enter JavaScript mode,

131
00:06:39,630 --> 00:06:43,080
‫so that here we can then define an object.

132
00:06:43,080 --> 00:06:45,210
‫So, here, we need an object,

133
00:06:45,210 --> 00:06:47,340
‫which will contain all the data

134
00:06:47,340 --> 00:06:50,940
‫that we want to make accessible to the child components.

135
00:06:50,940 --> 00:06:53,580
‫And, so that's basically gonna be similar

136
00:06:53,580 --> 00:06:56,100
‫to these props that we have here.

137
00:06:56,100 --> 00:06:57,000
‫So, for example,

138
00:06:57,000 --> 00:07:01,053
‫one of the entries in this object will be posts.

139
00:07:02,070 --> 00:07:07,070
‫So, the posts should be equal to the searched posts.

140
00:07:07,140 --> 00:07:10,260
‫And, so then that's exactly what we have here.

141
00:07:10,260 --> 00:07:13,050
‫So, here we passed in a props called post,

142
00:07:13,050 --> 00:07:15,720
‫which is equal to the search posts variable

143
00:07:15,720 --> 00:07:17,343
‫that we have in this component.

144
00:07:18,420 --> 00:07:22,773
‫And, so we can keep going and keep adding all of them.

145
00:07:23,760 --> 00:07:28,760
‫So, we also want onClear-Posts to be handleClear-Posts.

146
00:07:30,180 --> 00:07:33,150
‫And, of course, we also want to pass our function

147
00:07:33,150 --> 00:07:35,010
‫to add posts,

148
00:07:35,010 --> 00:07:40,010
‫so onAddPost should be equal handleAddPost.

149
00:07:43,440 --> 00:07:47,130
‫Alright, so basically what we did

150
00:07:47,130 --> 00:07:51,300
‫was to pass this state right here,

151
00:07:51,300 --> 00:07:53,040
‫so this derived state

152
00:07:53,040 --> 00:07:55,440
‫and these two event handler functions

153
00:07:55,440 --> 00:07:57,960
‫into our context value.

154
00:07:57,960 --> 00:08:01,530
‫So, we created an object which contains one property

155
00:08:01,530 --> 00:08:05,133
‫for each of these values that we want to pass in.

156
00:08:06,570 --> 00:08:09,720
‫Alright, and so let's now do the same thing

157
00:08:09,720 --> 00:08:11,643
‫also for the search query.

158
00:08:14,070 --> 00:08:18,150
‫So, search query actually equal to search query.

159
00:08:18,150 --> 00:08:20,400
‫So, there we don't need to change anything.

160
00:08:20,400 --> 00:08:24,750
‫And, then also set search query.

161
00:08:24,750 --> 00:08:27,150
‫So, remember that having this

162
00:08:27,150 --> 00:08:30,630
‫is exactly the same thing as this, right?

163
00:08:30,630 --> 00:08:34,320
‫And, so then we don't need to write that second part.

164
00:08:34,320 --> 00:08:38,790
‫Now, usually, we create one context per state domain.

165
00:08:38,790 --> 00:08:43,560
‫So, basically, we would have one context only for the posts

166
00:08:43,560 --> 00:08:48,300
‫and then another context only for the search data here.

167
00:08:48,300 --> 00:08:52,080
‫So, in fact, this is actually called the post context

168
00:08:52,080 --> 00:08:55,920
‫and so it should only be for these three parts here.

169
00:08:55,920 --> 00:08:59,070
‫And, then we could also create a search context,

170
00:08:59,070 --> 00:09:01,350
‫where we would place these two.

171
00:09:01,350 --> 00:09:03,180
‫So, that would be a bit cleaner.

172
00:09:03,180 --> 00:09:06,270
‫But, here, we are just learning how context works.

173
00:09:06,270 --> 00:09:08,373
‫And, so that's not really a problem.

174
00:09:09,450 --> 00:09:12,870
‫Now, okay, so now we have all our data here

175
00:09:12,870 --> 00:09:14,430
‫inside our context.

176
00:09:14,430 --> 00:09:17,160
‫And, so it's time to consume the context

177
00:09:17,160 --> 00:09:20,130
‫in all the components that actually need access

178
00:09:20,130 --> 00:09:21,330
‫to this data.

179
00:09:21,330 --> 00:09:24,123
‫And, so let's do that in the next lecture.