1
00:00:00,690 --> 00:00:03,150
In the last video we went through a pretty nasty refactor.

2
00:00:03,180 --> 00:00:07,980
Again we're doing this refactor because setting up all this context stuff is always going to be just

3
00:00:07,980 --> 00:00:13,440
about identical no matter what type of resource we are dealing with an array of objects in array numbers

4
00:00:13,440 --> 00:00:15,830
array of strings just a string just a number.

5
00:00:15,900 --> 00:00:16,890
It really doesn't matter.

6
00:00:16,920 --> 00:00:19,730
Everything is always going to be just about identical.

7
00:00:19,890 --> 00:00:24,480
So we've now created this create data context function right here that's going to do a lot of setup

8
00:00:24,480 --> 00:00:25,860
for us automatically.

9
00:00:25,860 --> 00:00:30,600
So now we can really just focus on the parts that matter like actually handling some data changing that

10
00:00:30,600 --> 00:00:32,820
data and that's pretty much it.

11
00:00:32,880 --> 00:00:35,500
And there's one last thing we have to do to fix all this stuff up.

12
00:00:35,550 --> 00:00:40,350
Remember right now we are passing in a function right here that describes how we want to change our

13
00:00:40,350 --> 00:00:41,020
data.

14
00:00:41,160 --> 00:00:45,030
We're passing that into the second argument to create data contexts.

15
00:00:45,060 --> 00:00:49,860
This function refers to our dispatch but the dispatch isn't available inside this file.

16
00:00:49,860 --> 00:00:55,080
Instead that dispatch function is only created over here inside of our provider component so we're just

17
00:00:55,080 --> 00:01:00,330
gonna add in a little bit of fancy code to essentially make sure that this add blog post function right

18
00:01:00,330 --> 00:01:02,850
here gets access to dispatch.

19
00:01:02,850 --> 00:01:07,500
So I would kind of left this half to last because it's going to be just kind of a nasty little thing

20
00:01:07,530 --> 00:01:09,570
one more nasty refactor and then we're all done.

21
00:01:10,200 --> 00:01:11,230
So here's we're gonna do.

22
00:01:11,280 --> 00:01:16,280
Again add blog post needs to have access to that dispatch function that's how we change our state.

23
00:01:16,500 --> 00:01:21,030
So we're gonna make sure that we call this function right here with The Dispatch.

24
00:01:21,030 --> 00:01:29,260
Function and then inside this thing rather than just calling dispatch right away I'm going to instead

25
00:01:29,410 --> 00:01:35,580
return a new function and inside that new function I'm going to call dispatch.

26
00:01:35,860 --> 00:01:38,890
So I know this looks a bit nasty but let's save this.

27
00:01:38,900 --> 00:01:43,310
We're going to flip back over to our create data context file and we're gonna add in a little bit of

28
00:01:43,310 --> 00:01:47,750
code that's gonna essentially kind of solve or make this a little bit more clear as to what's going

29
00:01:47,750 --> 00:01:53,870
on as a quick reminder at blog post right here is being provided inside of an object to the second argument

30
00:01:53,930 --> 00:01:55,930
of create data context.

31
00:01:56,000 --> 00:02:00,020
Back inside of create data context there's that object right there that's gonna have all of our different

32
00:02:00,110 --> 00:02:01,380
action functions.

33
00:02:01,430 --> 00:02:05,960
And remember those action functions essentially describe how we're going to change our state object.

34
00:02:05,960 --> 00:02:13,110
They call dispatch so actions I'm going to add in a new line after we set up or call use reduce right

35
00:02:13,110 --> 00:02:21,780
here actions is going to be an object that might have a key of like add blog post and that's going to

36
00:02:21,780 --> 00:02:28,190
be a function that expects to be called with dispatch and then inside there we return a function that's

37
00:02:28,190 --> 00:02:30,180
going to actually do something.

38
00:02:30,190 --> 00:02:36,730
So here's the idea we're going to loop through that actions object for every key in this case like just

39
00:02:36,730 --> 00:02:42,590
add a blog post we're gonna take that function right there we're going to call it with the dispatch

40
00:02:42,590 --> 00:02:46,420
argument and that's going to give us back that function right there.

41
00:02:46,490 --> 00:02:51,570
And that function right there is what we're going to pass on down into our value prop right here.

42
00:02:51,770 --> 00:02:57,920
And it's essentially going to let all of our child components make changes to our state object OK so

43
00:02:57,920 --> 00:02:58,840
let's try this out.

44
00:02:58,850 --> 00:03:04,160
I know this is like just nasty stuff but I just want to show you really interesting code here that's

45
00:03:04,160 --> 00:03:06,160
pretty much what it comes down to.

46
00:03:06,180 --> 00:03:11,030
So we need to loop through this object for every key we're going to call that function with the dispatch

47
00:03:11,030 --> 00:03:16,040
function and that's going to return a function that were then going to pass down on the value prop so

48
00:03:16,040 --> 00:03:21,860
to do so I'm going to make an object right here they'll call bound actions the naming there indicates

49
00:03:21,860 --> 00:03:26,390
Look the reason I'm calling it bound actions can indicate that we processed all these actions and they

50
00:03:26,390 --> 00:03:33,420
are bound to this copy of dispatch so then to iterate through that object I'll use a for in loop so

51
00:03:33,420 --> 00:03:45,230
I'll say for let key in actions so inside this loop key will be equal to first add blog post so going

52
00:03:45,220 --> 00:03:46,430
to use that key property.

53
00:03:46,540 --> 00:03:51,010
I'll look at bound actions and I'm going to say at key.

54
00:03:51,250 --> 00:03:56,300
So that's essentially in the first case it would be bound actions dot add blog posts like so so say

55
00:03:56,300 --> 00:04:02,960
bound actions at key is going to be actions at key so actions at key right there is going to return

56
00:04:03,230 --> 00:04:08,330
or give us a reference reference to that function right there we're going to call that function with

57
00:04:08,570 --> 00:04:15,110
dispatch and that's the trick so we're going to loop through just like I said we're gonna take this

58
00:04:15,110 --> 00:04:20,200
function we're gonna call it with dispatch that's gonna give us back our function right here.

59
00:04:20,210 --> 00:04:25,520
That can now safely refer to the dispatch function and then we're gonna set that whole thing on the

60
00:04:25,520 --> 00:04:26,570
bound actions.

61
00:04:26,570 --> 00:04:32,460
Object and then finally we're gonna take that bound actions object we're gonna pass it down on our value

62
00:04:32,460 --> 00:04:33,110
prop.

63
00:04:33,240 --> 00:04:38,580
So in addition to state we're also going to pass down actions actually you know let's just spread that

64
00:04:38,580 --> 00:04:40,340
entire object and that's all a bit easier.

65
00:04:40,350 --> 00:04:46,110
So I'll say dot dot dot bound actions like so now our value prop right here that we share with all the

66
00:04:46,110 --> 00:04:50,640
rest of our components is still going to have the ad blog post function that it had before but now it's

67
00:04:50,640 --> 00:04:54,930
got like a bunch of fancy code around it to essentially make sure that it gets called with that dispatch

68
00:04:54,930 --> 00:04:58,040
function and has the ability to actually change our state.

69
00:04:58,350 --> 00:05:03,120
Again I'm to say it for like the third or fourth time I know this is some nasty stuff but I just want

70
00:05:03,120 --> 00:05:08,250
to show you like some really high level stuff at how fancy we can get and kind of elegant when it comes

71
00:05:08,250 --> 00:05:11,140
to dealing with all this context stuff OK.

72
00:05:11,160 --> 00:05:15,160
So that's very much the end of nasty stuff at this point you're sitting there like Steven I hate you

73
00:05:15,160 --> 00:05:16,540
this doesn't make any sense.

74
00:05:17,220 --> 00:05:18,000
We're all done.

75
00:05:18,000 --> 00:05:18,450
That's it.

76
00:05:18,450 --> 00:05:19,620
We're done.

77
00:05:19,650 --> 00:05:21,900
So now everything's set up.

78
00:05:22,160 --> 00:05:24,010
Now the last thing we're going to do.

79
00:05:24,320 --> 00:05:26,810
We're going to fix a couple of different references.

80
00:05:26,810 --> 00:05:33,790
So right now our blog context file is now exporting to variables of capital C context and provider.

81
00:05:33,830 --> 00:05:38,240
So we just have to go round to a couple of different files and make sure that we have the same variable

82
00:05:38,240 --> 00:05:39,920
names being referred to.

83
00:05:39,920 --> 00:05:45,940
So first off back inside of index screen we have a import from that blog context and we are importing

84
00:05:45,940 --> 00:05:47,740
just the blog context variable.

85
00:05:47,740 --> 00:05:50,350
There is no longer a blog context variable.

86
00:05:50,350 --> 00:05:53,860
Instead we're exporting to different named variables.

87
00:05:53,860 --> 00:05:59,410
So we're gonna place our curly braces and the only one out of those two context and provider that we

88
00:05:59,410 --> 00:06:06,070
care about inside this file is capital C context so we can pass in capital C context to use context

89
00:06:06,070 --> 00:06:07,000
right there.

90
00:06:07,000 --> 00:06:13,090
Like so now if we ever have two different values of context like maybe we have one that's coming from

91
00:06:13,090 --> 00:06:17,770
blog context or another from a totally different source of data like image contexts or something like

92
00:06:17,770 --> 00:06:23,410
that we would have two different identically named variables to solve that we can use a little bit of

93
00:06:23,410 --> 00:06:29,100
syntax right here so we can say context as and then rename that variable so we could call it like blog

94
00:06:29,110 --> 00:06:34,960
context after all and then call the second one as image context and so we can still refer to these different

95
00:06:34,960 --> 00:06:38,350
things appropriately even though they are technically named identically.

96
00:06:38,590 --> 00:06:42,880
But in this case I'm just gonna leave it as capital C context.

97
00:06:42,920 --> 00:06:44,700
Now the other thing we're going to fix up really quickly.

98
00:06:44,840 --> 00:06:46,800
We don't have a data variable anymore.

99
00:06:46,850 --> 00:06:52,940
Remember we just took that entire state object that we got back and we called it simply state as opposed

100
00:06:52,940 --> 00:06:54,330
to data.

101
00:06:54,330 --> 00:06:59,390
So rather than D structuring off data we're going to restructure off state and make sure we pass state

102
00:06:59,390 --> 00:07:02,570
into our flat list.

103
00:07:02,640 --> 00:07:03,260
There we go.

104
00:07:04,330 --> 00:07:10,260
And then finally inside of our apt j ust file we are importing blog provider from blog context.

105
00:07:10,270 --> 00:07:12,550
We don't have a blog provider variable anymore.

106
00:07:12,550 --> 00:07:14,640
Instead we are calling it simply provider.

107
00:07:14,680 --> 00:07:20,170
Once again if we needed to we could rename this on the fly to something like log provider if we needed

108
00:07:20,170 --> 00:07:20,460
to.

109
00:07:20,470 --> 00:07:22,450
But in this case we don't.

110
00:07:22,510 --> 00:07:32,960
Now I can just update my j ASX down here with provider instead and that's it.

111
00:07:33,000 --> 00:07:38,310
I apologize somewhat I know this is nasty stuff nasty nasty but unfortunately if you don't want to use

112
00:07:38,310 --> 00:07:41,020
redux This is what we have to do.

113
00:07:41,160 --> 00:07:45,450
And as I mentioned earlier we are not gonna use redux too much inside this course or at least in this

114
00:07:45,450 --> 00:07:46,240
application.

115
00:07:46,380 --> 00:07:51,870
And so we were going to essentially build redux from scratch to some degree and that's kind of vaguely

116
00:07:51,870 --> 00:07:53,160
what we have now done.

117
00:07:53,280 --> 00:07:58,230
We haven't really rebuilt all of redux but we've definitely kind of added in some functionally functionality

118
00:07:58,230 --> 00:08:00,080
around some different portions of it.

119
00:08:00,870 --> 00:08:01,140
OK.

120
00:08:01,170 --> 00:08:05,140
So all the refactor is done so now we can finally test it.

121
00:08:05,160 --> 00:08:10,680
I'm gonna go back over here again to tap on ADD post and I still see my list of blog posts as before.

122
00:08:10,770 --> 00:08:17,730
So effectively no big change but now we've got this great function called create data context.

123
00:08:17,730 --> 00:08:20,040
This is like total magic right here.

124
00:08:20,040 --> 00:08:22,590
Any time that we need to add in some kind of new resource.

125
00:08:22,620 --> 00:08:27,810
So images comments whatever else we're gonna create another one of these context files all we have to

126
00:08:27,810 --> 00:08:34,080
do to find the reducer define some functions they'll be called with dispatch.

127
00:08:34,080 --> 00:08:38,490
And from those we're going to return a function that's going to dispatch an action that's going to attempt

128
00:08:38,490 --> 00:08:40,430
to modify our state in some way.

129
00:08:40,590 --> 00:08:43,670
We then call create data contexts and that's pretty much it.

130
00:08:43,680 --> 00:08:46,230
Game over nothing else required.

131
00:08:46,230 --> 00:08:50,520
So this is actually a really elegant solution anytime we need to add in another type of resource we're

132
00:08:50,520 --> 00:08:52,400
gonna have such an easy time.

133
00:08:52,500 --> 00:08:57,930
Now unfortunately on the application working on right now we only have this blog resource so it's not

134
00:08:57,930 --> 00:09:00,700
super useful here because we're just creating this one context.

135
00:09:00,810 --> 00:09:04,680
But on future applications we put together if we were going to have multiple different types of data

136
00:09:04,890 --> 00:09:07,670
it's going to be really easy to work with.

137
00:09:07,680 --> 00:09:07,950
All right.

138
00:09:07,990 --> 00:09:08,850
Now we're all done.

139
00:09:08,850 --> 00:09:11,400
Another quick pause right here and we'll continue in the next video.