1
00:00:01,050 --> 00:00:01,883
Instructor: In the last section,

2
00:00:01,883 --> 00:00:04,230
we created our state validator middleware.

3
00:00:04,230 --> 00:00:06,210
We're now going to wire it up to our application

4
00:00:06,210 --> 00:00:08,490
and then we'll be able to test it out inside the browser.

5
00:00:08,490 --> 00:00:09,480
And notice that right now,

6
00:00:09,480 --> 00:00:12,270
we're just console logging out the result of the validation.

7
00:00:12,270 --> 00:00:14,370
So, we're not necessarily doing any, like,

8
00:00:14,370 --> 00:00:16,290
really meaningful notification

9
00:00:16,290 --> 00:00:18,040
of, hey, something just went wrong.

10
00:00:18,900 --> 00:00:21,930
So, to get started, I'm gonna open up my Root.js file,

11
00:00:21,930 --> 00:00:22,860
which is where we're setting up

12
00:00:22,860 --> 00:00:25,046
all of our other middlewares.

13
00:00:25,046 --> 00:00:27,646
And inside of here, I will import the stateValidator

14
00:00:29,130 --> 00:00:34,130
from middlewares stateValidator.

15
00:00:37,910 --> 00:00:40,170
I'll then find the apply middleware call

16
00:00:40,170 --> 00:00:43,620
and I will add it to the apply middleware function.

17
00:00:43,620 --> 00:00:46,350
Remember that we specifically put together

18
00:00:46,350 --> 00:00:48,570
our async middleware function right here

19
00:00:48,570 --> 00:00:50,190
in such a way that it doesn't matter

20
00:00:50,190 --> 00:00:51,960
whether it's the first or second

21
00:00:51,960 --> 00:00:54,570
or whatever middleware inside of our chain.

22
00:00:54,570 --> 00:00:57,630
So, we could safely add in our state validator

23
00:00:57,630 --> 00:01:01,410
to before or after the async middleware

24
00:01:01,410 --> 00:01:03,030
that we just put together.

25
00:01:03,030 --> 00:01:05,430
So, just because, I'm gonna put it second.

26
00:01:05,430 --> 00:01:06,720
Why not?

27
00:01:06,720 --> 00:01:08,850
So, I'll say stateValidator.

28
00:01:08,850 --> 00:01:10,260
And then I'm gonna very quickly save this,

29
00:01:10,260 --> 00:01:11,880
because it's gonna reformat my code,

30
00:01:11,880 --> 00:01:14,180
and make it a little bit more legible for you.

31
00:01:15,780 --> 00:01:18,480
Okay, so, we're now ready to test this out.

32
00:01:18,480 --> 00:01:21,600
I've already restarted my server, with npm run start.

33
00:01:21,600 --> 00:01:23,640
So, my server is currently running.

34
00:01:23,640 --> 00:01:25,390
I'll flip back over to the browser.

35
00:01:28,860 --> 00:01:30,840
And we're just gonna see what happens.

36
00:01:30,840 --> 00:01:32,590
So, I've got my console open here

37
00:01:33,540 --> 00:01:35,910
and let's get started by trying a sign in.

38
00:01:35,910 --> 00:01:37,110
So, you'll notice that when I click

39
00:01:37,110 --> 00:01:38,520
sign in or sign out right here,

40
00:01:38,520 --> 00:01:40,110
I see the true.

41
00:01:40,110 --> 00:01:41,490
So, true means to indicate

42
00:01:41,490 --> 00:01:44,400
that the structure of our state looks A-okay

43
00:01:44,400 --> 00:01:47,400
and we successfully passed our validation.

44
00:01:47,400 --> 00:01:49,800
And we could just as well say, sign in,

45
00:01:49,800 --> 00:01:52,830
post a comment, fetch comments,

46
00:01:52,830 --> 00:01:54,450
and then after a brief delay,

47
00:01:54,450 --> 00:01:56,100
of us actually fetching those comments,

48
00:01:56,100 --> 00:01:58,290
we should see true appear as well.

49
00:01:58,290 --> 00:01:59,970
Because all the comments that we fetched

50
00:01:59,970 --> 00:02:03,060
and added to our redux store are valid as well.

51
00:02:03,060 --> 00:02:04,590
So, it definitely looks like,

52
00:02:04,590 --> 00:02:05,790
you know, as far as we can tell,

53
00:02:05,790 --> 00:02:07,860
this is at least handling the good case

54
00:02:07,860 --> 00:02:10,350
in which our store looks like it should.

55
00:02:10,350 --> 00:02:12,090
So, let's try making it break now.

56
00:02:12,090 --> 00:02:13,590
Let's try adding in a little bit of code

57
00:02:13,590 --> 00:02:16,350
to make our redux store invalid

58
00:02:16,350 --> 00:02:18,750
and try to get some warning to appear down here.

59
00:02:20,430 --> 00:02:22,980
So, in order to break our validation,

60
00:02:22,980 --> 00:02:25,530
I'm gonna open up my comments reducer.

61
00:02:25,530 --> 00:02:26,760
And essentially all we have to do

62
00:02:26,760 --> 00:02:30,300
inside of here is put some value inside

63
00:02:30,300 --> 00:02:33,600
of our array of comments that does not belong.

64
00:02:33,600 --> 00:02:34,500
So, how about this?

65
00:02:34,500 --> 00:02:37,590
Inside of my SAVE_COMMENT: case right here,

66
00:02:37,590 --> 00:02:39,030
I'll say that we're gonna add in

67
00:02:39,030 --> 00:02:42,300
all of our existing comments, the payload,

68
00:02:42,300 --> 00:02:43,770
and then just to make this thing break,

69
00:02:43,770 --> 00:02:46,173
I'm gonna put in an object as well.

70
00:02:47,430 --> 00:02:49,950
Now, again, this is a very contrived example.

71
00:02:49,950 --> 00:02:52,320
Of course, it's very unlikely you're going to do this

72
00:02:52,320 --> 00:02:53,640
in a real application,

73
00:02:53,640 --> 00:02:54,990
but the idea behind this middleware

74
00:02:54,990 --> 00:02:59,040
is to handle cases in really large complex applications

75
00:02:59,040 --> 00:03:01,500
where you might have a lot more complicated logic

76
00:03:01,500 --> 00:03:03,570
going on inside of your reducer.

77
00:03:03,570 --> 00:03:05,910
So, let's now test this out.

78
00:03:05,910 --> 00:03:06,743
I'll go back over.

79
00:03:06,743 --> 00:03:08,223
I'll refresh the application.

80
00:03:11,100 --> 00:03:13,770
And then remember we can trigger that SAVE_COMMENT:

81
00:03:13,770 --> 00:03:15,090
action type right here

82
00:03:15,090 --> 00:03:18,300
by going over to the post form and entering in a comment.

83
00:03:18,300 --> 00:03:19,470
So, I'll sign in.

84
00:03:19,470 --> 00:03:20,850
Post a comment,

85
00:03:20,850 --> 00:03:22,590
type some stuff in,

86
00:03:22,590 --> 00:03:23,790
and then submit it.

87
00:03:23,790 --> 00:03:26,070
And now you'll notice that we have failed validation

88
00:03:26,070 --> 00:03:28,560
because our array of comments

89
00:03:28,560 --> 00:03:32,460
now contains a value type that should not belong in there.

90
00:03:32,460 --> 00:03:34,185
And, so, maybe it's okay,

91
00:03:34,185 --> 00:03:36,210
maybe we can get away with that,

92
00:03:36,210 --> 00:03:38,520
but if I flip back over to the main page,

93
00:03:38,520 --> 00:03:41,550
where my comment list should render out all those things,

94
00:03:41,550 --> 00:03:45,480
you'll notice that we get a pretty nasty error message here.

95
00:03:45,480 --> 00:03:48,810
So, without a doubt, if we had been able to catch the fact

96
00:03:48,810 --> 00:03:51,870
that we put an invalid value inside of our redux store,

97
00:03:51,870 --> 00:03:54,240
well, that would've probably been pretty helpful.

98
00:03:54,240 --> 00:03:56,640
Rather than us having to manually just run

99
00:03:56,640 --> 00:03:58,083
into the error head first.

100
00:03:59,190 --> 00:04:00,450
So, as the very last thing that we'll do

101
00:04:00,450 --> 00:04:01,620
inside of our reducer,

102
00:04:01,620 --> 00:04:03,780
let's add a little bit of logic

103
00:04:03,780 --> 00:04:07,050
to get a meaningful console log.

104
00:04:07,050 --> 00:04:09,270
So, rather than just logging out true or false,

105
00:04:09,270 --> 00:04:11,170
of whether this thing is valid or not,

106
00:04:12,090 --> 00:04:14,730
I'm going to wrap the validation statement.

107
00:04:14,730 --> 00:04:16,079
So, here it is right here,

108
00:04:16,079 --> 00:04:19,410
inside of an if statement, like so.

109
00:04:19,410 --> 00:04:22,353
So, we're gonna say if this thing is not valid.

110
00:04:23,220 --> 00:04:26,220
So, normally if it is valid, this is gonna return true.

111
00:04:26,220 --> 00:04:28,410
If it's invalid, we're going to return false.

112
00:04:28,410 --> 00:04:30,270
So, we're gonna flip that over to a true.

113
00:04:30,270 --> 00:04:31,890
So, if we are invalid,

114
00:04:31,890 --> 00:04:34,170
then I'll do a console.warn

115
00:04:34,170 --> 00:04:36,090
and we'll say something like

116
00:04:36,090 --> 00:04:40,860
Invalid state schema detected,

117
00:04:40,860 --> 00:04:42,010
or something like that.

118
00:04:43,830 --> 00:04:44,700
So, we'll save this

119
00:04:44,700 --> 00:04:47,610
and we'll go try out our application again.

120
00:04:47,610 --> 00:04:48,443
So, back over here,

121
00:04:48,443 --> 00:04:49,803
I'll let my reload kick in.

122
00:04:54,750 --> 00:04:56,190
I'll sign in.

123
00:04:56,190 --> 00:04:57,930
I will try to post a comment.

124
00:04:57,930 --> 00:05:00,360
Now this time when I submit the comment,

125
00:05:00,360 --> 00:05:01,860
we're gonna see a warning up here, down here,

126
00:05:01,860 --> 00:05:04,410
that says; Invalid state schema detected.

127
00:05:04,410 --> 00:05:06,360
And, so, that would be the signal to you and I,

128
00:05:06,360 --> 00:05:08,850
as developers, in the development environment,

129
00:05:08,850 --> 00:05:10,380
that we probably just goofed up

130
00:05:10,380 --> 00:05:12,840
some logic inside of one of our reducers.

131
00:05:12,840 --> 00:05:14,610
And this will be our signal that we need to go

132
00:05:14,610 --> 00:05:16,350
and check out our code and figure out

133
00:05:16,350 --> 00:05:18,360
exactly what's going wrong.

134
00:05:18,360 --> 00:05:19,440
So, that's pretty much it.

135
00:05:19,440 --> 00:05:22,320
That is our state validation middleware.

136
00:05:22,320 --> 00:05:24,960
Again, this has been an example of, you know,

137
00:05:24,960 --> 00:05:27,210
just something that I personally find,

138
00:05:27,210 --> 00:05:28,620
you know, as middleware is kind of useful.

139
00:05:28,620 --> 00:05:30,630
But more importantly, I want to give you an example

140
00:05:30,630 --> 00:05:33,510
of the type of things we can do with middleware.

141
00:05:33,510 --> 00:05:36,510
It's not just about handling asynchronous action creators.

142
00:05:36,510 --> 00:05:39,270
We can do really interesting things with them as well.

143
00:05:39,270 --> 00:05:41,520
And, so, it's really up to you, as an engineer,

144
00:05:41,520 --> 00:05:43,800
to figure out what interesting use cases

145
00:05:43,800 --> 00:05:47,220
you might come up with for your own personal projects.

146
00:05:47,220 --> 00:05:48,540
So, this has been a lot of fun.

147
00:05:48,540 --> 00:05:49,470
Let's take a break here

148
00:05:49,470 --> 00:05:51,420
and we'll continue in the next section.