1
00:00:01,020 --> 00:00:03,510
-: In the last section, we finished up our first middleware.

2
00:00:03,510 --> 00:00:06,480
We're now gonna continue by working on a second middleware.

3
00:00:06,480 --> 00:00:07,890
The idea behind the second one is

4
00:00:07,890 --> 00:00:09,360
that you're just gonna get a little bit

5
00:00:09,360 --> 00:00:11,790
of a quick demonstration of what we can do

6
00:00:11,790 --> 00:00:14,790
with middleware inside of a typical Redux application.

7
00:00:14,790 --> 00:00:17,790
I think this next one is pretty interesting.

8
00:00:17,790 --> 00:00:19,230
It might not be the most useful thing

9
00:00:19,230 --> 00:00:21,030
in the world for small projects,

10
00:00:21,030 --> 00:00:23,360
but if you ever work on a larger Redux project

11
00:00:23,360 --> 00:00:25,830
you might actually like the middleware we're gonna make.

12
00:00:25,830 --> 00:00:26,663
So, let's get to it.

13
00:00:26,663 --> 00:00:29,310
Let's talk about what we're gonna build.

14
00:00:29,310 --> 00:00:31,020
So first I wanna do a quick review

15
00:00:31,020 --> 00:00:33,180
of what our current Redux state looks like

16
00:00:33,180 --> 00:00:34,890
inside of our application.

17
00:00:34,890 --> 00:00:36,720
We've got that comments piece of state

18
00:00:36,720 --> 00:00:38,027
that has an array of strings

19
00:00:38,027 --> 00:00:39,540
and then we've got the off piece

20
00:00:39,540 --> 00:00:43,263
of state that is always a Boolean of true or false.

21
00:00:44,190 --> 00:00:45,960
If we were to think about this state

22
00:00:45,960 --> 00:00:49,410
in terms of its schema or kind of its types

23
00:00:49,410 --> 00:00:51,870
we would end up with something down here.

24
00:00:51,870 --> 00:00:53,790
So our comments reducer,

25
00:00:53,790 --> 00:00:55,290
or the comments piece of state

26
00:00:55,290 --> 00:00:59,340
should always be an array that contains strings.

27
00:00:59,340 --> 00:01:01,290
That's what this nomenclature right here

28
00:01:01,290 --> 00:01:03,330
or this syntax is meant to indicate.

29
00:01:03,330 --> 00:01:06,360
Comments should always be an array of strings

30
00:01:06,360 --> 00:01:09,660
and the auth piece of state should always be a Boolean value

31
00:01:09,660 --> 00:01:11,553
and absolutely nothing else.

32
00:01:12,690 --> 00:01:14,670
Inside of our current application,

33
00:01:14,670 --> 00:01:18,090
we've got some pretty straightforward and simple reducers.

34
00:01:18,090 --> 00:01:21,120
And so honestly I think it'd be kind of unlikely

35
00:01:21,120 --> 00:01:23,220
that we'd ever make a big mistake inside

36
00:01:23,220 --> 00:01:27,797
of our reducer and, say, accidentally insert a, like, object

37
00:01:27,797 --> 00:01:30,930
in here in the comments array.

38
00:01:30,930 --> 00:01:33,360
Kind of unlikely, but let's imagine for a second

39
00:01:33,360 --> 00:01:35,610
that our application was a lot larger

40
00:01:35,610 --> 00:01:37,960
and much more complicated than it is right now.

41
00:01:39,240 --> 00:01:40,710
If it was much more complicated

42
00:01:40,710 --> 00:01:43,320
and we had more complicated reducers

43
00:01:43,320 --> 00:01:46,860
and action creators floating around, this might be a risk.

44
00:01:46,860 --> 00:01:48,450
You know, we might be very concerned

45
00:01:48,450 --> 00:01:50,970
about accidentally putting in values

46
00:01:50,970 --> 00:01:53,670
to our state that should not belong there.

47
00:01:53,670 --> 00:01:56,430
If we accidentally put an object

48
00:01:56,430 --> 00:01:59,940
or an array into our comments piece of state,

49
00:01:59,940 --> 00:02:02,910
it would definitely cause our entire application to break;

50
00:02:02,910 --> 00:02:04,890
no two ways about it.

51
00:02:04,890 --> 00:02:07,290
And let's say that for our auth value right here

52
00:02:07,290 --> 00:02:09,810
of being true or false, if we accidentally put it

53
00:02:09,810 --> 00:02:11,790
in a value of something like, I don't know,

54
00:02:11,790 --> 00:02:13,500
a string or something like that

55
00:02:13,500 --> 00:02:15,300
well maybe our application wouldn't break,

56
00:02:15,300 --> 00:02:19,260
but it probably would have some unintended consequences.

57
00:02:19,260 --> 00:02:21,990
So, the idea I'm trying to convey here is that

58
00:02:21,990 --> 00:02:24,870
it'd be really nice if we had some way to, kind of,

59
00:02:24,870 --> 00:02:28,350
confirm that the structure of our state object

60
00:02:28,350 --> 00:02:30,480
was always what we expected to be,

61
00:02:30,480 --> 00:02:33,150
like always an array of strings for that comments thing

62
00:02:33,150 --> 00:02:34,729
and always a comment or a Boolean

63
00:02:34,729 --> 00:02:37,620
for the off piece of state as well.

64
00:02:37,620 --> 00:02:39,750
So that's the idea behind this middleware.

65
00:02:39,750 --> 00:02:41,520
We're gonna make a middleware that's going to

66
00:02:41,520 --> 00:02:45,390
kind of confirm that the structure and the type

67
00:02:45,390 --> 00:02:47,850
of values within our Redux state object

68
00:02:47,850 --> 00:02:50,610
are always what we expect it to be.

69
00:02:50,610 --> 00:02:53,100
So this is primarily going to be a middleware intended

70
00:02:53,100 --> 00:02:56,220
for use in a development environment.

71
00:02:56,220 --> 00:02:59,613
Our middleware is going to watch for incoming actions.

72
00:03:00,540 --> 00:03:02,520
It's not going to actually do anything

73
00:03:02,520 --> 00:03:03,990
with these incoming actions.

74
00:03:03,990 --> 00:03:06,750
Instead, it's just going to immediately send that action

75
00:03:06,750 --> 00:03:08,400
on to the next middleware.

76
00:03:08,400 --> 00:03:10,020
And so eventually this action is gonna flow

77
00:03:10,020 --> 00:03:11,187
down to the reducers.

78
00:03:11,187 --> 00:03:13,950
The reducers will calculate some updated state

79
00:03:13,950 --> 00:03:16,380
and then our application will update.

80
00:03:16,380 --> 00:03:18,690
After the reducers calculate that update

81
00:03:18,690 --> 00:03:21,390
that's when this middleware is gonna kick into gear.

82
00:03:21,390 --> 00:03:24,870
So after the reducers calculate the updated state

83
00:03:24,870 --> 00:03:26,940
the middleware is gonna say, okay

84
00:03:26,940 --> 00:03:28,110
are y'all done doing your update;

85
00:03:28,110 --> 00:03:29,310
like all the reducers ran,

86
00:03:29,310 --> 00:03:31,260
we've got our new version of state?

87
00:03:31,260 --> 00:03:34,890
When that happens, we're gonna pull that new updated

88
00:03:34,890 --> 00:03:38,005
value of state and we're gonna validate the structure

89
00:03:38,005 --> 00:03:41,760
and the type of values in that state object.

90
00:03:41,760 --> 00:03:43,500
And if everything inside there is valid

91
00:03:43,500 --> 00:03:45,780
and we've got the correct values and the correct types

92
00:03:45,780 --> 00:03:48,210
throughout the entire structure, then we're gonna say, okay,

93
00:03:48,210 --> 00:03:51,900
state looks good, we're valid, we're not gonna do anything.

94
00:03:51,900 --> 00:03:54,750
But if it looks like there's ever some invalid value

95
00:03:54,750 --> 00:03:59,750
like let's say we detect that we accidentally put an object

96
00:04:00,000 --> 00:04:02,250
into our comments array right here,

97
00:04:02,250 --> 00:04:05,010
well then we're going to say, nope, not valid.

98
00:04:05,010 --> 00:04:08,220
Some mistaken value is inside of our state object

99
00:04:08,220 --> 00:04:09,870
and we're going to log out a warning

100
00:04:09,870 --> 00:04:12,450
to the terminal or the console inside the browser.

101
00:04:12,450 --> 00:04:13,860
So again, this is really intended

102
00:04:13,860 --> 00:04:15,780
for use during development for you

103
00:04:15,780 --> 00:04:18,060
as a developer to get some feedback to say like,

104
00:04:18,060 --> 00:04:21,360
hey, you just put some bad value into your redux store.

105
00:04:21,360 --> 00:04:23,850
You probably have a bug somewhere.

106
00:04:23,850 --> 00:04:25,680
So that's the idea behind this middleware.

107
00:04:25,680 --> 00:04:26,910
Let's take a pause right now.

108
00:04:26,910 --> 00:04:28,740
We'll come back to the next section and we're gonna talk

109
00:04:28,740 --> 00:04:31,320
about our approach to actually implement this.

110
00:04:31,320 --> 00:04:33,770
So quick break and I'll see you in just a second.