1
00:00:01,320 --> 00:00:06,900
We've now got a perfectly working version of our blog provider that's now using our use reducer hook

2
00:00:06,900 --> 00:00:10,980
right here and the actual blog reducer that we just created as well.

3
00:00:10,980 --> 00:00:15,880
Now once again just like our use state example this is a hundred percent valid code.

4
00:00:15,930 --> 00:00:19,170
What we have inside of here works 100 percent just fine.

5
00:00:19,170 --> 00:00:23,790
And if we wanted to we could probably build out the rest of our application without any issue whatsoever

6
00:00:24,940 --> 00:00:25,560
nonetheless.

7
00:00:25,570 --> 00:00:28,040
We're going to add in one more refactor here.

8
00:00:28,060 --> 00:00:33,940
This is still kind of like an optional refactor just like the use reducer stuff was but this refactor

9
00:00:33,940 --> 00:00:38,230
that we're about to do is going to add in support for some advance patterns so we're going to need in

10
00:00:38,230 --> 00:00:40,540
some later applications we put together.

11
00:00:40,600 --> 00:00:42,300
So again we could pause right here.

12
00:00:42,370 --> 00:00:46,270
We could make use of all this code for the entire application we're trying to build but we're going

13
00:00:46,270 --> 00:00:50,720
to do another refactor just to set ourselves up for some future success.

14
00:00:50,740 --> 00:00:54,060
So let me first begin by telling you why we're going to do this refactor.

15
00:00:54,160 --> 00:00:55,300
It's really simple.

16
00:00:55,300 --> 00:01:00,940
Right now we have a single file called blog context inside of application and this file is all about

17
00:01:00,940 --> 00:01:03,040
managing blog posts.

18
00:01:03,040 --> 00:01:07,420
It's a hundred percent reasonable to think that at some point time we might have to add in some additional

19
00:01:07,420 --> 00:01:09,360
type of resource inside of application.

20
00:01:09,550 --> 00:01:16,360
So maybe a list of comments or a list of images to show to the user or who knows something else related

21
00:01:16,540 --> 00:01:19,180
to the application we're putting together very frequently.

22
00:01:19,180 --> 00:01:24,430
We have an app that has multiple types of data flowing through it not just one single type like our

23
00:01:24,430 --> 00:01:26,490
list of blog posts we have here.

24
00:01:26,530 --> 00:01:32,200
So chances are that at some point in time we're going to have to eventually create another context file

25
00:01:32,230 --> 00:01:36,910
inside of our context directory that's going to have some code almost identical to what you see inside

26
00:01:36,910 --> 00:01:37,990
of here.

27
00:01:38,020 --> 00:01:42,520
Think about it in just about every case if we want to add in some additional type of resource we're

28
00:01:42,520 --> 00:01:44,940
gonna have to create another context variable.

29
00:01:45,070 --> 00:01:47,060
We'll make another reducer.

30
00:01:47,260 --> 00:01:52,840
We'll create another provider component like this one right here that calls the same use reducer and

31
00:01:52,840 --> 00:01:55,550
then shows the same provider thing inside there.

32
00:01:55,580 --> 00:01:58,190
Essentially it's going to be all duplicate code.

33
00:01:58,300 --> 00:02:03,700
You can even imagine if we wanted to change this example right here to work with say a counter example

34
00:02:03,700 --> 00:02:08,290
like we wanted to count some variable that goes up and down we would end up with just about identical

35
00:02:08,290 --> 00:02:10,010
code inside there.

36
00:02:10,030 --> 00:02:14,560
So the refactor that we're going to do is going to make a function that's going to essentially automate

37
00:02:14,560 --> 00:02:19,750
the process of creating and sending up a lot of the stuff that we did inside of here will then be able

38
00:02:19,750 --> 00:02:25,090
to use that function to add in new types of resources to our application very easily and all we should

39
00:02:25,090 --> 00:02:31,600
have to do is create a new actual reducer function create a couple helper functions that describe how

40
00:02:31,600 --> 00:02:37,450
we're going to dispatch some action object and then maybe also provide the only other thing that really

41
00:02:37,450 --> 00:02:41,680
gets customized is that array right there are that initial state.

42
00:02:41,700 --> 00:02:43,530
So that's pretty much it.

43
00:02:43,600 --> 00:02:48,430
So to get started we're going to open up our context directory and say they're going to make a new file

44
00:02:48,430 --> 00:02:57,550
called create data context dot J.S. Now you'll notice that I created this file with a lowercase c and

45
00:02:57,550 --> 00:02:58,450
create right there.

46
00:02:58,540 --> 00:03:02,160
That's because we're going to eventually export a plane function from this file.

47
00:03:02,290 --> 00:03:07,300
And usually by convention anytime we export a plane function we usually label it with a lowercase leading

48
00:03:07,300 --> 00:03:07,780
character.

49
00:03:08,570 --> 00:03:08,830
OK.

50
00:03:08,860 --> 00:03:13,150
So inside of here we're gonna write out a little bit of code that's going to essentially automate creating

51
00:03:13,270 --> 00:03:18,040
all this stuff we just did inside of blog context so we're gonna write out a little bit of code inside

52
00:03:18,040 --> 00:03:22,150
of here that's going to look maybe a little bit mysterious but again we're just doing the same thing

53
00:03:22,150 --> 00:03:28,720
we did over here in an automated fashion so to get started I'm going to first import react and use reducer

54
00:03:29,340 --> 00:03:31,710
run react after that.

55
00:03:31,750 --> 00:03:38,210
I'm going to export default a function and into this function we're going to eventually pass the three

56
00:03:38,210 --> 00:03:43,880
things that actually need to be customized anytime that we create a context like I said there are only

57
00:03:43,910 --> 00:03:48,690
a couple things inside of here that need to be changed if we ever wanted to create another resource.

58
00:03:48,890 --> 00:03:52,370
The first thing we would have to change would be the reducer function itself.

59
00:03:53,120 --> 00:03:57,700
So whenever we call this function that's going to create a new data context for us automatically going

60
00:03:57,710 --> 00:04:02,730
to receive a first argument that's going to be our reducer function.

61
00:04:02,750 --> 00:04:06,860
The second argument or the second thing that's going to change anytime that we create another type of

62
00:04:06,860 --> 00:04:12,440
resource would be the different helper functions like this one right here that contains some kind of

63
00:04:12,500 --> 00:04:18,340
dispatch inside of it so I'm going to expect that I'm also going to receive a second argument to this

64
00:04:18,340 --> 00:04:20,530
function that I'll call actions.

65
00:04:20,530 --> 00:04:24,880
This is going to eventually be an object that has all these different callback functions we want to

66
00:04:24,880 --> 00:04:30,790
make available to our child components so they can somehow dispatch an action and change our state.

67
00:04:30,860 --> 00:04:35,360
And then finally there's only one other thing inside of blog context that needs to be customized and

68
00:04:35,360 --> 00:04:39,490
that is the initial state that we call use reducer with.

69
00:04:39,530 --> 00:04:44,210
So in our case we had a initial state of an empty array but we could very easily have other types of

70
00:04:44,210 --> 00:04:50,240
initial state like a empty object or a number or a string or just about anything else.

71
00:04:50,270 --> 00:04:59,350
So the last argument to our create data context function will be some initial state like so OK so now

72
00:04:59,350 --> 00:05:03,350
that we've got these three things that are gonna be customized for every different piece of context

73
00:05:03,350 --> 00:05:05,900
we ever create all these different types of resources.

74
00:05:06,140 --> 00:05:10,450
We're not going to create two things inside this function and export them or simply return them.

75
00:05:10,460 --> 00:05:11,350
Sorry.

76
00:05:11,360 --> 00:05:15,170
So the first thing we're going to create inside of here is going to be our context object.

77
00:05:15,360 --> 00:05:17,660
So going to create a new variable called context

78
00:05:20,770 --> 00:05:27,270
like so so remember back inside a blog context right there we created our blog context variable if we

79
00:05:27,270 --> 00:05:31,800
created a different type of resource inside of our app like say again comments or images or something

80
00:05:31,800 --> 00:05:32,600
like that.

81
00:05:32,610 --> 00:05:37,200
Nothing about that line of code right there is going to really change except for the name of the variable.

82
00:05:37,200 --> 00:05:41,760
So chances are if we ever need to create a different type of resource we're going have to call create

83
00:05:41,760 --> 00:05:48,330
context and it doesn't really matter what we call it then after that we're going to set up the provider

84
00:05:48,330 --> 00:05:50,560
function.

85
00:05:50,620 --> 00:05:54,610
So this is going to be like the same function that we created back over inside a blog context the one

86
00:05:54,610 --> 00:05:56,590
called blog provider.

87
00:05:56,590 --> 00:06:03,170
So this thing is going to take an argument for me a prop object that has a children property and then

88
00:06:03,170 --> 00:06:08,120
inside of here we're going to essentially write out all the same exact code that we had inside of our

89
00:06:08,180 --> 00:06:10,050
other blog provider that we just wrote.

90
00:06:10,100 --> 00:06:15,970
But it's just going to use some very generic variable names so first I'm going to create my are going

91
00:06:15,970 --> 00:06:18,950
to call use reducer when we call user reducer.

92
00:06:18,960 --> 00:06:24,680
We're gonna get back our state and dispatch so I call use reducer.

93
00:06:24,910 --> 00:06:30,650
And when we call that we're going to pass in the reducer that we call added into this function and then

94
00:06:30,660 --> 00:06:32,670
second argument will be that initial state

95
00:06:36,990 --> 00:06:41,400
then after that we're going to ignore anything having to do with actions like we did back over here

96
00:06:41,400 --> 00:06:42,540
right here.

97
00:06:42,540 --> 00:06:47,550
And instead we're just going to focus on returning our J.S. sex for right now so the J.S. sex that we're

98
00:06:47,550 --> 00:06:55,200
going to return from this new provider component will be return context dot provider gonna open up that

99
00:06:55,200 --> 00:07:01,260
tag like so and inside of it I will return children and then remember any data that we want to share

100
00:07:01,260 --> 00:07:07,610
with the rest of our application is going to be available on the value prop so remember in this case

101
00:07:07,610 --> 00:07:11,780
right here what we're doing here we're trying to make some very arbitrary version of all this stuff

102
00:07:11,810 --> 00:07:13,970
that can work with different types of resources.

103
00:07:14,450 --> 00:07:19,670
So chances are whenever we add in this value prop right here we want to share our piece of state in

104
00:07:19,670 --> 00:07:24,710
some way to change that piece of state with all of our different child components exactly as we did

105
00:07:24,920 --> 00:07:27,620
back over inside of blog context.

106
00:07:27,650 --> 00:07:33,290
So on my value prop right here I'm going to add in an object that has a state property that is whatever

107
00:07:33,320 --> 00:07:35,480
our current state is.

108
00:07:35,480 --> 00:07:41,410
As usual I've got an identical key value pair right here so I'll condense it down to state like so Okay

109
00:07:41,510 --> 00:07:42,760
that looks good.

110
00:07:42,860 --> 00:07:46,550
And now finally I'm going to ignore like that action stuff right now.

111
00:07:46,730 --> 00:07:50,010
The last thing I'm going to do from the overall export default function right here.

112
00:07:50,030 --> 00:07:53,520
So I'm inside of just that last set of curly braces.

113
00:07:53,780 --> 00:07:59,600
And from here I'm going to return the context object that we just created.

114
00:07:59,660 --> 00:08:06,170
It's that one right there in the provider component we just created as well like so OK.

115
00:08:06,270 --> 00:08:11,070
So just to clarify what we just did right here we made a reusable function that we can use several times

116
00:08:11,070 --> 00:08:16,200
inside of application to automate the process of setting up this context stuff and setting up this provider

117
00:08:16,200 --> 00:08:17,170
as well.

118
00:08:17,220 --> 00:08:22,050
We still have to come back here and add in the ability to have some action objects which remember are

119
00:08:22,050 --> 00:08:25,770
going to ultimately call dispatch but we'll do that in just a second.

120
00:08:25,770 --> 00:08:30,690
First let's make sure that we can make use of this create data context function to automate the process

121
00:08:30,930 --> 00:08:34,580
of creating our blog context which we created over here.

122
00:08:34,710 --> 00:08:39,480
So rather than having to go through this repetitive process of calling create context and then setting

123
00:08:39,480 --> 00:08:43,620
up the provider and all this stuff that we would have to do with each additional resource we added in

124
00:08:43,920 --> 00:08:49,600
we can instead just make use of this create data context function that we just created to back inside

125
00:08:49,600 --> 00:08:59,910
a blog context at the very top I'm going to import create data context from create data context and

126
00:08:59,910 --> 00:09:05,500
then inside of here we can go through and delete all the code that we're not making use of anymore or

127
00:09:05,500 --> 00:09:09,550
at least I should say got extracted to the create data context function.

128
00:09:09,550 --> 00:09:13,930
So we no longer have to create any context on our own because create data context takes care of that

129
00:09:13,930 --> 00:09:14,510
for us.

130
00:09:14,530 --> 00:09:15,340
It's gonna delete that.

131
00:09:16,680 --> 00:09:21,190
Then inside of blog provider right here we don't need the entire blog provider anymore.

132
00:09:21,240 --> 00:09:25,470
Instead the only thing we need inside of here is that one function we defined that's going to eventually

133
00:09:25,470 --> 00:09:27,290
change our state.

134
00:09:27,450 --> 00:09:33,240
So I'm going to copy or so we cut that out paste it outside that function and now we can delete the

135
00:09:33,240 --> 00:09:38,280
entire blog provider because everything inside of here is always going to look almost identical no matter

136
00:09:38,280 --> 00:09:40,860
what type of resource we are dealing with.

137
00:09:40,950 --> 00:09:44,360
So I can now delete that as well.

138
00:09:44,430 --> 00:09:49,140
And then finally we don't really need to export our blog context anymore because that's not even created

139
00:09:49,140 --> 00:09:50,010
inside of here.

140
00:09:50,070 --> 00:09:52,910
So I can delete the export default.

141
00:09:53,080 --> 00:09:53,600
All right.

142
00:09:53,660 --> 00:09:55,460
Now here's the magic part.

143
00:09:55,460 --> 00:10:03,330
At the very bottom we're going to do an export contest and we're gonna do structure of whatever create

144
00:10:03,330 --> 00:10:05,320
data context back over here returns.

145
00:10:05,340 --> 00:10:08,550
So we're going to d structure out context and provider.

146
00:10:08,550 --> 00:10:17,080
So going to d structure out context and provider and that's going to come from calling create data context

147
00:10:18,250 --> 00:10:21,430
and we're going to put in as our first argument our reducer.

148
00:10:21,440 --> 00:10:22,390
So that's blog producer

149
00:10:26,020 --> 00:10:30,270
then we're gonna put in an object that contains all the different actions that we want to have.

150
00:10:30,370 --> 00:10:33,120
In that case that's gonna be our ad blog post function right here.

151
00:10:33,130 --> 00:10:39,070
I'm gonna put that in inside of a object add blog post and then finally as the third argument I'm going

152
00:10:39,070 --> 00:10:44,820
to get a new line inside of here just makes this a little bit more legible so there's my new line.

153
00:10:45,150 --> 00:10:49,370
And then the third argument is going to be our initial default state value which once again is going

154
00:10:49,370 --> 00:10:56,800
to be just an empty array like so OK so that is the create data context function in action.

155
00:10:56,800 --> 00:11:02,230
So now what we have inside this file is tremendously reduced compared to what we had before.

156
00:11:02,230 --> 00:11:03,670
Again I can't say enough.

157
00:11:03,670 --> 00:11:07,630
Everything we had around creating that context object in setting up that provider.

158
00:11:07,630 --> 00:11:11,300
It's all going to be identical no matter what kind of data we are dealing with.

159
00:11:11,350 --> 00:11:14,790
And that's why we extracted all that stuff out to a separate helper file.

160
00:11:14,860 --> 00:11:19,300
So now anytime we want to add in some new type of resource inside our application all we have to do

161
00:11:19,300 --> 00:11:24,550
is create like a new context file we're gonna create our reducer we're going to create the different

162
00:11:24,550 --> 00:11:30,290
functions that are going to dispatch an action that's going to modify our reducer and then finally we're

163
00:11:30,290 --> 00:11:35,300
going to call create data context passenger reducer pass an object with all those different actions

164
00:11:35,590 --> 00:11:41,780
passin our default state and it's going to give back to us our context object and the provider which

165
00:11:41,780 --> 00:11:48,090
is a react component that makes all of our data available to something else inside of application.

166
00:11:48,170 --> 00:11:52,320
So I think this looks a lot better than what we have before as one last change inside of here.

167
00:11:52,340 --> 00:11:57,030
We can remove that import scene at the very top because we don't have any J.S. sex inside here.

168
00:11:57,080 --> 00:12:01,730
Now I know the refactor we just did is a little bit nasty and probably a little bit confusing and we're

169
00:12:01,730 --> 00:12:02,660
not even done with it.

170
00:12:02,750 --> 00:12:04,160
So let's just take a quick pause.

171
00:12:04,180 --> 00:12:08,960
We come back in the next video we're going to wrap up this refactor and once again explain exactly what

172
00:12:08,960 --> 00:12:10,060
we did inside of here.

173
00:12:10,140 --> 00:12:11,410
So see you in just a minute.