1
00:00:00,720 --> 00:00:01,553
-: In the last section

2
00:00:01,553 --> 00:00:05,160
we generated a schema document to describe our redux state.

3
00:00:05,160 --> 00:00:06,120
We're now going to start

4
00:00:06,120 --> 00:00:08,820
to work on our actual middleware itself.

5
00:00:08,820 --> 00:00:10,260
I'm gonna get started by flipping back

6
00:00:10,260 --> 00:00:11,583
over to my code editor.

7
00:00:12,420 --> 00:00:14,130
And inside my middlewares directory,

8
00:00:14,130 --> 00:00:16,260
I'm gonna make a new file,

9
00:00:16,260 --> 00:00:18,603
called State Validator.

10
00:00:19,624 --> 00:00:20,790
Cause that's more or less what it is.

11
00:00:20,790 --> 00:00:23,970
We're trying to validate the structure of our state.

12
00:00:23,970 --> 00:00:25,860
So inside of state validator, we're gonna write

13
00:00:25,860 --> 00:00:29,610
out our boiler plate for creating a middleware.

14
00:00:29,610 --> 00:00:31,350
Remember, it's that long series

15
00:00:31,350 --> 00:00:33,330
of functions that return each other.

16
00:00:33,330 --> 00:00:35,013
So I'll say export default,

17
00:00:36,180 --> 00:00:39,270
and then we're leave our arguments empty for just a second.

18
00:00:39,270 --> 00:00:41,580
So I'm gonna put in my three functions like so.

19
00:00:41,580 --> 00:00:43,200
So make sure you count that out.

20
00:00:43,200 --> 00:00:45,370
We wanna have three sets of parentheses

21
00:00:46,950 --> 00:00:47,783
and then we'll go back through

22
00:00:47,783 --> 00:00:49,350
and start to fill out the arguments.

23
00:00:49,350 --> 00:00:52,410
So on the first object right here, the first argument list

24
00:00:52,410 --> 00:00:54,633
we're gonna pull off that dispatch property.

25
00:00:55,560 --> 00:00:59,040
On the second one, we get our, excuse me, next function.

26
00:00:59,040 --> 00:01:00,030
There we go.

27
00:01:00,030 --> 00:01:02,973
And then on the last one, we get our actual action.

28
00:01:04,349 --> 00:01:05,550
So then inside of here

29
00:01:05,550 --> 00:01:08,430
we get to decide exactly what we want to do.

30
00:01:08,430 --> 00:01:10,110
Remember we've got that diagram

31
00:01:10,110 --> 00:01:12,630
that we'll take a look at very quickly,

32
00:01:12,630 --> 00:01:14,190
right here.

33
00:01:14,190 --> 00:01:16,050
So the first thing that we want to do is

34
00:01:16,050 --> 00:01:18,870
essentially absolutely nothing.

35
00:01:18,870 --> 00:01:21,420
So unlike the middleware that we worked

36
00:01:21,420 --> 00:01:22,770
on just a moment ago

37
00:01:22,770 --> 00:01:25,920
this one is going to immediately try to send

38
00:01:25,920 --> 00:01:28,080
our action onto the next middleware,

39
00:01:28,080 --> 00:01:29,070
because in this case,

40
00:01:29,070 --> 00:01:31,320
for the schema middleware we are putting together

41
00:01:31,320 --> 00:01:33,690
we really want this action to go down

42
00:01:33,690 --> 00:01:36,840
and hit our reducers and get our updated state.

43
00:01:36,840 --> 00:01:39,840
And then we want to try to run this middleware.

44
00:01:39,840 --> 00:01:40,680
So that's the idea here.

45
00:01:40,680 --> 00:01:42,780
We're going to immediately call next

46
00:01:42,780 --> 00:01:44,460
and pass the action in.

47
00:01:44,460 --> 00:01:46,800
That's going to cause the action to go along to all

48
00:01:46,800 --> 00:01:49,740
of our other middlewares and eventually to the reducers.

49
00:01:49,740 --> 00:01:51,480
And after all that happens,

50
00:01:51,480 --> 00:01:54,243
then we're going to kick our validation logic in.

51
00:01:55,320 --> 00:01:57,630
So to immediately pass the action on

52
00:01:57,630 --> 00:01:58,860
the very first thing we're gonna do

53
00:01:58,860 --> 00:02:00,330
inside this function,

54
00:02:00,330 --> 00:02:02,583
is call next with the action.

55
00:02:03,750 --> 00:02:07,920
Then down here we can write out our actual validation logic.

56
00:02:07,920 --> 00:02:10,560
And that validation logic is only going to occur

57
00:02:10,560 --> 00:02:12,990
after the action has gone through all the rest

58
00:02:12,990 --> 00:02:15,573
of everything else inside of our Redux store.

59
00:02:17,910 --> 00:02:20,010
Okay, so I'm gonna save this file for right now

60
00:02:20,010 --> 00:02:22,170
and I'm gonna pull over our JSON schema

61
00:02:22,170 --> 00:02:24,870
that we just created into a new file.

62
00:02:24,870 --> 00:02:26,850
So inside of my middlewares directory

63
00:02:26,850 --> 00:02:29,220
I'll make another new file,

64
00:02:29,220 --> 00:02:33,690
and I'll call it, How about stateschema.js?

65
00:02:33,690 --> 00:02:35,520
Now, chances are there's a better place

66
00:02:35,520 --> 00:02:37,980
to put this file than inside the middlewares directory,

67
00:02:37,980 --> 00:02:40,430
but for right now, I think that it's good enough.

68
00:02:41,640 --> 00:02:44,700
So I will go back over to that JSON schema tool.

69
00:02:44,700 --> 00:02:48,120
I'm gonna grab this entire blob of JSON right here.

70
00:02:48,120 --> 00:02:50,220
It looks like they got a nice copy button.

71
00:02:51,750 --> 00:02:54,220
And back inside of my state schema.js file

72
00:02:55,380 --> 00:02:57,390
I'll do an export default,

73
00:02:57,390 --> 00:03:00,150
and then I'm gonna paste that entire thing.

74
00:03:00,150 --> 00:03:03,300
I'm gonna make sure that it's an actual valid value.

75
00:03:03,300 --> 00:03:04,133
There we go.

76
00:03:05,280 --> 00:03:06,480
Oh, look at that.

77
00:03:06,480 --> 00:03:08,310
It grabbed all the numbers as well.

78
00:03:08,310 --> 00:03:09,690
Geez, that's nasty.

79
00:03:09,690 --> 00:03:12,810
Let's see if we can copy this without all those numbers.

80
00:03:12,810 --> 00:03:14,670
Nope. How about plane?

81
00:03:14,670 --> 00:03:16,050
There we go.

82
00:03:16,050 --> 00:03:17,460
Let's copy that.

83
00:03:17,460 --> 00:03:18,780
Okay, let's try it again.

84
00:03:18,780 --> 00:03:21,480
Export default, and that's better.

85
00:03:21,480 --> 00:03:22,683
No line numbers.

86
00:03:23,550 --> 00:03:26,220
Okay, so we've now got our state schema inside of here.

87
00:03:26,220 --> 00:03:27,270
And when I save the file

88
00:03:27,270 --> 00:03:28,844
you'll notice that my

89
00:03:28,844 --> 00:03:32,850
code formatter kicks in and removes all those double quotes.

90
00:03:32,850 --> 00:03:34,320
That's totally fine.

91
00:03:34,320 --> 00:03:36,840
This can be essentially the object it is.

92
00:03:36,840 --> 00:03:39,543
It doesn't have to be a JSON thing-a-ma-jig.

93
00:03:40,530 --> 00:03:42,180
So I'm now gonna flip back over,

94
00:03:42,180 --> 00:03:43,743
to my state validator.

95
00:03:45,810 --> 00:03:47,970
Up at the very top, I'm going to import

96
00:03:47,970 --> 00:03:50,640
in the state schema file we just created.

97
00:03:50,640 --> 00:03:52,410
I'm also going to import in that

98
00:03:52,410 --> 00:03:55,050
tv4 library that we just installed

99
00:03:55,050 --> 00:03:56,970
in the last section as well.

100
00:03:56,970 --> 00:04:00,513
So I will import tv4 from tv4,

101
00:04:01,410 --> 00:04:06,410
and I will import state schema from state schema.

102
00:04:09,510 --> 00:04:11,430
So now inside the middleware itself

103
00:04:11,430 --> 00:04:13,260
after we call next with action,

104
00:04:13,260 --> 00:04:15,270
we need to grab our state

105
00:04:15,270 --> 00:04:18,183
and attempt to validate it against our state schema.

106
00:04:19,589 --> 00:04:21,959
The first thing I wanna do is show you how we actually pull

107
00:04:21,959 --> 00:04:25,170
off this validation using the tv4 library.

108
00:04:25,170 --> 00:04:27,960
So I pulled up the documentation for tv4.

109
00:04:27,960 --> 00:04:29,760
Here it is on GitHub.

110
00:04:29,760 --> 00:04:32,250
I can go down to the first example right here.

111
00:04:32,250 --> 00:04:34,710
And yep, this is pretty much all we wanna do.

112
00:04:34,710 --> 00:04:37,410
So we're gonna use tv4.validate.

113
00:04:37,410 --> 00:04:39,600
We're gonna pass in our actual data and then

114
00:04:39,600 --> 00:04:43,290
as a second argument, we pass back or we pass in the schema

115
00:04:43,290 --> 00:04:45,510
and that's gonna return an object that describes

116
00:04:45,510 --> 00:04:47,313
whether or not our object is valid.

117
00:04:48,900 --> 00:04:50,310
Now the second thing I wanna tell you about

118
00:04:50,310 --> 00:04:51,810
is how we actually get all

119
00:04:51,810 --> 00:04:55,710
of our data from our Redux store into this middleware.

120
00:04:55,710 --> 00:04:58,920
Remember, this first argument right here where

121
00:04:58,920 --> 00:05:01,980
we are currently pulling off the dispatch function.

122
00:05:01,980 --> 00:05:04,110
I had said previously there were a couple

123
00:05:04,110 --> 00:05:06,813
of different properties on this first argument.

124
00:05:07,890 --> 00:05:09,630
One of the other properties that is available

125
00:05:09,630 --> 00:05:12,963
to us is a function called Get State.

126
00:05:13,800 --> 00:05:17,040
So this is a function that we can call and when we call it

127
00:05:17,040 --> 00:05:20,670
it will return all of the state within our Redux store.

128
00:05:20,670 --> 00:05:21,900
So that's how we can get access

129
00:05:21,900 --> 00:05:24,930
to all the data that is produced by our reducers.

130
00:05:24,930 --> 00:05:28,260
We just call Get State, and that returns all the data.

131
00:05:28,260 --> 00:05:30,990
So that's basically both parts of the equation.

132
00:05:30,990 --> 00:05:34,290
We've got our validating library, we've got our data

133
00:05:34,290 --> 00:05:37,410
from the Redux store, and we've got our schema.

134
00:05:37,410 --> 00:05:39,510
So let's put it all together.

135
00:05:39,510 --> 00:05:42,453
Inside of here I'll write out tv4.validate.

136
00:05:43,350 --> 00:05:45,870
I'll pass in the second argument of our data

137
00:05:45,870 --> 00:05:47,670
which is gonna be get state

138
00:05:47,670 --> 00:05:50,520
and I'm going to invoke it cuz it is a function.

139
00:05:50,520 --> 00:05:52,590
And then as a second argument,

140
00:05:52,590 --> 00:05:55,980
I'll do state schema like so.

141
00:05:55,980 --> 00:05:57,000
And then for right now,

142
00:05:57,000 --> 00:05:59,640
we'll just do a simple console log of all this stuff

143
00:05:59,640 --> 00:06:02,460
just to see what happens when we run this.

144
00:06:02,460 --> 00:06:04,140
So let's take a brief pause right here.

145
00:06:04,140 --> 00:06:05,520
We're gonna continue in the next section

146
00:06:05,520 --> 00:06:07,670
and we'll test this out inside the browser.