1
00:00:00,870 --> 00:00:03,690
-: In the last section, we wired up our comment box component

2
00:00:03,690 --> 00:00:05,520
to the redux side of our application.

3
00:00:05,520 --> 00:00:06,990
And the instant we did that

4
00:00:06,990 --> 00:00:10,080
we started seeing a ton of our tests start to fail.

5
00:00:10,080 --> 00:00:11,310
In particular, I wanna point

6
00:00:11,310 --> 00:00:12,870
out that same error message that we looked

7
00:00:12,870 --> 00:00:15,600
at just a moment ago, at the end of the last video.

8
00:00:15,600 --> 00:00:17,850
So right here it says, could not find store

9
00:00:17,850 --> 00:00:20,340
in either the context or props of connect.

10
00:00:20,340 --> 00:00:22,230
Either wrap the root component

11
00:00:22,230 --> 00:00:25,110
in a provider or explicitly pass the store, blah, blah.

12
00:00:25,110 --> 00:00:26,940
You can read, you get the idea.

13
00:00:26,940 --> 00:00:30,270
So let me be really clear about what's happening here.

14
00:00:30,270 --> 00:00:33,090
When we put together a React Redux application

15
00:00:33,090 --> 00:00:34,530
we expect to see a structure

16
00:00:34,530 --> 00:00:35,820
like this right here.

17
00:00:35,820 --> 00:00:38,250
At the very top we've got that provider tag

18
00:00:38,250 --> 00:00:40,863
which has a instance of a Redux store.

19
00:00:41,880 --> 00:00:44,400
That provider tag then renders our app component

20
00:00:44,400 --> 00:00:46,530
which in turn renders every other component

21
00:00:46,530 --> 00:00:48,330
inside of our application.

22
00:00:48,330 --> 00:00:49,860
Now here's the key part.

23
00:00:49,860 --> 00:00:53,040
When we wrap a component with a connect function

24
00:00:53,040 --> 00:00:57,030
that connect function expects to see some parent component,

25
00:00:57,030 --> 00:01:02,030
within this hierarchy right here, that has the provider tag.

26
00:01:02,040 --> 00:01:04,440
So the instant we put this provider tag, or excuse me

27
00:01:04,440 --> 00:01:06,990
this connect tag right here, or this connect function,

28
00:01:06,990 --> 00:01:08,220
it's going to look up

29
00:01:08,220 --> 00:01:11,553
at the hierarchy and try to find that provider.

30
00:01:12,510 --> 00:01:14,640
That's what we want to have happen.

31
00:01:14,640 --> 00:01:16,260
Now, if we flip back over to

32
00:01:16,260 --> 00:01:18,090
our application inside the browser,

33
00:01:18,090 --> 00:01:20,460
this still works just fine.

34
00:01:20,460 --> 00:01:21,720
So what that tells us is

35
00:01:21,720 --> 00:01:24,180
that inside of our normal development environment

36
00:01:24,180 --> 00:01:25,860
like our normal application

37
00:01:25,860 --> 00:01:28,440
everything that we have works just fine.

38
00:01:28,440 --> 00:01:30,930
It's specifically in our test environment

39
00:01:30,930 --> 00:01:33,180
that this flow starts to break down.

40
00:01:33,180 --> 00:01:35,070
So let's figure out why.

41
00:01:35,070 --> 00:01:39,300
Well, if we go back over to our comment box dot test file

42
00:01:39,300 --> 00:01:43,050
so components tests, comment box dot test

43
00:01:43,050 --> 00:01:47,550
we are importing the comment box component by itself

44
00:01:47,550 --> 00:01:49,590
and then we try to render that component

45
00:01:49,590 --> 00:01:52,290
by itself in isolation.

46
00:01:52,290 --> 00:01:53,790
And so essentially what we're doing inside

47
00:01:53,790 --> 00:01:54,843
that test file,

48
00:01:56,670 --> 00:01:58,293
is just taking that component,

49
00:02:00,420 --> 00:02:03,000
right here and we're just kind of throwing it off

50
00:02:03,000 --> 00:02:04,170
into the wild.

51
00:02:04,170 --> 00:02:07,710
And it has absolutely no connection or any tie whatsoever

52
00:02:07,710 --> 00:02:10,979
to any provider tag or any store above it.

53
00:02:10,979 --> 00:02:13,440
And that's why we're seeing this error message right here.

54
00:02:13,440 --> 00:02:15,870
There's no store or provider tag

55
00:02:15,870 --> 00:02:18,840
in the context or props of that component.

56
00:02:18,840 --> 00:02:20,400
And so the component throws an error

57
00:02:20,400 --> 00:02:23,460
because it always wants to see a provider tag

58
00:02:23,460 --> 00:02:26,343
or a store in its parent hierarchy.

59
00:02:27,180 --> 00:02:29,130
So that's what's going wrong right now.

60
00:02:30,390 --> 00:02:32,460
So now we need to figure out a way to fix this,

61
00:02:32,460 --> 00:02:34,020
and that's the fun part.

62
00:02:34,020 --> 00:02:35,580
So there's a couple of obvious ways

63
00:02:35,580 --> 00:02:38,520
of fixing this and a couple of less obvious ways.

64
00:02:38,520 --> 00:02:41,220
Let's first tackle what might be the most obvious way

65
00:02:41,220 --> 00:02:42,930
of fixing this problem.

66
00:02:42,930 --> 00:02:46,110
So inside my comment box, dot test, dot js file

67
00:02:46,110 --> 00:02:48,360
one thing that we could possibly do is to just

68
00:02:48,360 --> 00:02:51,060
import all that stuff that we just imported

69
00:02:51,060 --> 00:02:53,220
into the index dot js file.

70
00:02:53,220 --> 00:02:54,960
So I encourage you not to write this stuff out.

71
00:02:54,960 --> 00:02:57,360
I'm just gonna very quickly show you one possible way

72
00:02:57,360 --> 00:02:58,890
of solving this.

73
00:02:58,890 --> 00:03:00,663
So we could import,

74
00:03:01,830 --> 00:03:04,470
create store from Redux,

75
00:03:04,470 --> 00:03:08,820
we could get our provider tag

76
00:03:08,820 --> 00:03:10,247
from React Redux,

77
00:03:10,247 --> 00:03:12,247
and then we could also get our reducers.

78
00:03:15,000 --> 00:03:17,670
And then when we render our comment box right here

79
00:03:17,670 --> 00:03:19,560
we could just very distinctly

80
00:03:19,560 --> 00:03:21,270
very forcibly say, hey, you know what?

81
00:03:21,270 --> 00:03:25,500
Comment box you're gonna get wrapped with a provider tag.

82
00:03:25,500 --> 00:03:26,760
So now you can't complain

83
00:03:26,760 --> 00:03:28,740
that you can't find a provider, because you know what?

84
00:03:28,740 --> 00:03:30,870
It's your immediate parent.

85
00:03:30,870 --> 00:03:34,560
And so then I'll call store is create store,

86
00:03:34,560 --> 00:03:37,140
I'll pass in my reducers an empty object like so.

87
00:03:37,140 --> 00:03:38,940
Okay, again encourage you not to write this out.

88
00:03:38,940 --> 00:03:42,090
I just wanna very quickly show you one way of solving this.

89
00:03:42,090 --> 00:03:45,210
So now I can save this file, flip back over my tests

90
00:03:45,210 --> 00:03:47,940
and I'm really going to expect these all to now pass,

91
00:03:47,940 --> 00:03:50,430
because now my comment box component knows

92
00:03:50,430 --> 00:03:51,930
about the component hierarchy above it

93
00:03:51,930 --> 00:03:54,360
and it sees that provider tag and it says, great,

94
00:03:54,360 --> 00:03:57,810
I've got my store, I've got the provider, I'm good to go.

95
00:03:57,810 --> 00:03:58,740
And so we can see that,

96
00:03:58,740 --> 00:04:00,090
yep, comment box,

97
00:04:00,090 --> 00:04:01,500
all set.

98
00:04:01,500 --> 00:04:03,660
So this is one way of solving this problem,

99
00:04:03,660 --> 00:04:07,230
but it's also probably the worst way.

100
00:04:07,230 --> 00:04:10,350
You see what's going wrong right here is that now inside

101
00:04:10,350 --> 00:04:12,660
of every test file that we put together,

102
00:04:12,660 --> 00:04:14,250
we would have to import

103
00:04:14,250 --> 00:04:16,500
these three different pieces right here,

104
00:04:16,500 --> 00:04:18,959
and then set up the provider tag.

105
00:04:18,959 --> 00:04:20,970
In addition, if we ever change the way

106
00:04:20,970 --> 00:04:23,760
in which our Redux store is created, by say

107
00:04:23,760 --> 00:04:24,993
adding in middleware.

108
00:04:25,980 --> 00:04:29,190
So let's say we also call apply middleware down here

109
00:04:29,190 --> 00:04:31,380
and we pass in some sets of middleware.

110
00:04:31,380 --> 00:04:32,700
Well, as soon as we start to add

111
00:04:32,700 --> 00:04:34,350
in more middleware to our application

112
00:04:34,350 --> 00:04:36,960
we'll have to go around to every single test file

113
00:04:36,960 --> 00:04:39,900
and modify this, apply middleware function.

114
00:04:39,900 --> 00:04:42,780
So essentially, this approach right here, while it works

115
00:04:42,780 --> 00:04:45,090
doesn't really scale that well because it's going to

116
00:04:45,090 --> 00:04:48,090
mean that we're gonna have to duplicate the setup code all

117
00:04:48,090 --> 00:04:50,160
over the place inside of our application,

118
00:04:50,160 --> 00:04:51,840
and we're gonna have to always keep it

119
00:04:51,840 --> 00:04:54,240
in sync with whatever is going on

120
00:04:54,240 --> 00:04:58,470
with the actual application inside of index dot js.

121
00:04:58,470 --> 00:05:01,050
So this is really not the best solution.

122
00:05:01,050 --> 00:05:04,110
So I'm gonna very quickly undo the additions

123
00:05:04,110 --> 00:05:05,710
that I just added in right here,

124
00:05:07,620 --> 00:05:10,380
and I'll remove the import statements as well.

125
00:05:10,380 --> 00:05:11,250
Okay.

126
00:05:11,250 --> 00:05:14,220
So instead we're gonna use a slightly different approach.

127
00:05:14,220 --> 00:05:15,750
And like I said, there's more

128
00:05:15,750 --> 00:05:17,700
than one way to solve this problem.

129
00:05:17,700 --> 00:05:19,860
We're just gonna pick what's probably the most

130
00:05:19,860 --> 00:05:22,080
straightforward and simple way.

131
00:05:22,080 --> 00:05:24,510
So the first thing to realize here is that right

132
00:05:24,510 --> 00:05:26,550
now we are creating our provider tag

133
00:05:26,550 --> 00:05:29,490
inside of our Route index dot js file.

134
00:05:29,490 --> 00:05:31,620
So this file right here really knows

135
00:05:31,620 --> 00:05:33,750
about how our provider is set up

136
00:05:33,750 --> 00:05:35,820
and how our Redux store is set up as well.

137
00:05:35,820 --> 00:05:38,430
That's where all this logic lives right now.

138
00:05:38,430 --> 00:05:39,480
So I'm gonna suggest

139
00:05:39,480 --> 00:05:43,050
that we refactor this file right here just a little bit

140
00:05:43,050 --> 00:05:45,840
and make the process of creating the provider

141
00:05:45,840 --> 00:05:48,210
and our Redux store, take all that logic

142
00:05:48,210 --> 00:05:52,200
and put it into a little helper function inside this file.

143
00:05:52,200 --> 00:05:54,690
Then we can use that function immediately to

144
00:05:54,690 --> 00:05:56,670
start our app right up right here.

145
00:05:56,670 --> 00:05:59,370
But we could also import that function

146
00:05:59,370 --> 00:06:02,670
into other test files inside of our application and use it

147
00:06:02,670 --> 00:06:05,550
as a way to set up all these other distinct components

148
00:06:05,550 --> 00:06:07,380
and make sure they have that provider

149
00:06:07,380 --> 00:06:11,130
with the Redux store inside their parent hierarchy.

150
00:06:11,130 --> 00:06:12,360
So essentially, we're gonna go

151
00:06:12,360 --> 00:06:14,110
for something that looks like this.

152
00:06:15,240 --> 00:06:17,940
So here's our comment box dot js file, excuse me

153
00:06:17,940 --> 00:06:20,280
comment box dot test dot js file.

154
00:06:20,280 --> 00:06:23,310
It's going to import our comment box component.

155
00:06:23,310 --> 00:06:26,340
And then it's also going to import a little helper function

156
00:06:26,340 --> 00:06:28,950
from our source index dot js file.

157
00:06:28,950 --> 00:06:31,303
And that helper functions sole purpose is going to be to set

158
00:06:31,303 --> 00:06:34,350
up the Redux store and the provider tag,

159
00:06:34,350 --> 00:06:37,110
and it's going to accept any arbitrary child

160
00:06:37,110 --> 00:06:38,820
component that we pass it.

161
00:06:38,820 --> 00:06:40,320
So inside of comment box

162
00:06:40,320 --> 00:06:42,720
we can make use of that little helper function

163
00:06:42,720 --> 00:06:44,940
and pass it our comment box and say,

164
00:06:44,940 --> 00:06:47,310
hey just take this random component right here

165
00:06:47,310 --> 00:06:50,040
and use it as a child to the provider tag.

166
00:06:50,040 --> 00:06:52,110
So, that's gonna be our strategy.

167
00:06:52,110 --> 00:06:53,340
Let's take a quick pause right here

168
00:06:53,340 --> 00:06:56,040
and we'll start to implement that in the next section.