1 00:00:00,840 --> 00:00:02,160 Instructor: In the last section we spoke about 2 00:00:02,160 --> 00:00:03,600 the purpose of the next middleware 3 00:00:03,600 --> 00:00:04,890 we're going to work on. 4 00:00:04,890 --> 00:00:06,630 So, the idea is that we wanna make sure 5 00:00:06,630 --> 00:00:08,910 that we do not accidentally mutate our state 6 00:00:08,910 --> 00:00:11,460 in some unpredictable fashion. 7 00:00:11,460 --> 00:00:13,320 Every single time we dispatch an action 8 00:00:13,320 --> 00:00:15,960 and our reducers calculate a new value for state, 9 00:00:15,960 --> 00:00:20,043 we're going to validate the structure of our Redux store. 10 00:00:21,030 --> 00:00:22,260 So if we have an object 11 00:00:22,260 --> 00:00:23,850 inside of our comments list right here, 12 00:00:23,850 --> 00:00:25,980 well, we should probably throw an air message 13 00:00:25,980 --> 00:00:27,630 or a warning of some sort and say, 14 00:00:27,630 --> 00:00:29,760 hey, something just went wrong. 15 00:00:29,760 --> 00:00:31,680 So one of the chief concerns around doing this 16 00:00:31,680 --> 00:00:35,250 is going to be how we actually validate our state. 17 00:00:35,250 --> 00:00:36,390 We're not gonna write out code 18 00:00:36,390 --> 00:00:38,940 that's going to manually look at every value inside of here 19 00:00:38,940 --> 00:00:40,440 and say like, hey, are you a string, 20 00:00:40,440 --> 00:00:42,150 are you a string and so on, 21 00:00:42,150 --> 00:00:44,340 instead, we're going to to be making use 22 00:00:44,340 --> 00:00:47,160 of an automated validation framework 23 00:00:47,160 --> 00:00:50,670 that's built upon something called JSON Schema. 24 00:00:50,670 --> 00:00:51,503 So in this section, 25 00:00:51,503 --> 00:00:54,630 we're gonna very quickly talk about what JSON Schema is 26 00:00:54,630 --> 00:00:57,273 and how we can use it to validate our Redux store. 27 00:00:58,140 --> 00:01:00,660 I'm gonna get started by opening up a new browser tab 28 00:01:00,660 --> 00:01:04,022 and navigating to json-schema.org. 29 00:01:04,950 --> 00:01:09,510 JSON Schema is a standard for validating JSON documents. 30 00:01:09,510 --> 00:01:10,980 And so if we think of all the data 31 00:01:10,980 --> 00:01:14,220 inside of our Redux store as being just JSON data 32 00:01:14,220 --> 00:01:15,690 and that's really what it is, 33 00:01:15,690 --> 00:01:18,210 it's just a collection of objects, 34 00:01:18,210 --> 00:01:21,780 strings, integers, arrays, and so on, 35 00:01:21,780 --> 00:01:23,340 then we can use JSON Schema 36 00:01:23,340 --> 00:01:26,220 to validate all the data inside of our Redux store 37 00:01:26,220 --> 00:01:28,893 very quickly and really quite easily. 38 00:01:30,090 --> 00:01:31,050 To give you a better idea 39 00:01:31,050 --> 00:01:33,300 of how JSON Schema works in general 40 00:01:33,300 --> 00:01:35,520 what we do is we first form up 41 00:01:35,520 --> 00:01:37,920 something called a schema document 42 00:01:37,920 --> 00:01:40,830 and it's gonna look something like what you see down here. 43 00:01:40,830 --> 00:01:45,750 So we would refer to this as our JSON Schema file. 44 00:01:45,750 --> 00:01:48,360 It's gonna be a file that contains a definition 45 00:01:48,360 --> 00:01:51,570 of the overall structure of what our Redux store should be 46 00:01:51,570 --> 00:01:55,440 or whatever our arbitrary random JSON data might be. 47 00:01:55,440 --> 00:01:58,950 We'll see an example of a JSON Schema file in just a second. 48 00:01:58,950 --> 00:02:00,390 Once we create this file, 49 00:02:00,390 --> 00:02:02,220 we can then make use of a library 50 00:02:02,220 --> 00:02:04,080 that will install in just a moment 51 00:02:04,080 --> 00:02:07,740 to take some actual data like our Redux state up here. 52 00:02:07,740 --> 00:02:11,730 So this is an actual pile of data inside of our application 53 00:02:11,730 --> 00:02:16,260 and we'll validate this data against our JSON Schema file. 54 00:02:16,260 --> 00:02:17,430 So again, we've got kinda like 55 00:02:17,430 --> 00:02:19,350 two or three moving pieces here. 56 00:02:19,350 --> 00:02:21,270 We've got the JSON Schema file 57 00:02:21,270 --> 00:02:24,150 that describes the structure of our data. 58 00:02:24,150 --> 00:02:26,160 We've got our actual Redux state, 59 00:02:26,160 --> 00:02:27,990 which is the data we wanna validate, 60 00:02:27,990 --> 00:02:30,330 and then we've got a library that we're going to use 61 00:02:30,330 --> 00:02:32,940 to essentially compare the two against each other 62 00:02:32,940 --> 00:02:34,200 and determine whether or not 63 00:02:34,200 --> 00:02:36,003 our Redux state is valid. 64 00:02:37,350 --> 00:02:41,130 Let's very quickly look at an example of a JSON Schema file. 65 00:02:41,130 --> 00:02:42,750 So back over on this page, 66 00:02:42,750 --> 00:02:44,260 I'll go to examples 67 00:02:46,530 --> 00:02:48,420 and that I'll pull up a very quick example 68 00:02:48,420 --> 00:02:51,150 of what a JSON Schema might look like. 69 00:02:51,150 --> 00:02:53,130 So inside this example right here, 70 00:02:53,130 --> 00:02:55,530 every property that you see inside the object 71 00:02:55,530 --> 00:03:00,150 has some meaning inside of the JSON Schema standard. 72 00:03:00,150 --> 00:03:02,070 So the property that you see right here 73 00:03:02,070 --> 00:03:05,730 of say type indicates that the root object 74 00:03:05,730 --> 00:03:07,830 or the root thing that we're looking at right here 75 00:03:07,830 --> 00:03:10,440 should be of type object. 76 00:03:10,440 --> 00:03:12,240 And that object should have 77 00:03:12,240 --> 00:03:14,940 this list of properties assigned to it. 78 00:03:14,940 --> 00:03:18,630 It should have a first name property that is a string, 79 00:03:18,630 --> 00:03:21,450 it should have a last name that is a string 80 00:03:21,450 --> 00:03:24,630 and it should have an age that is an integer 81 00:03:24,630 --> 00:03:27,780 and that integer must be at least the value zero, 82 00:03:27,780 --> 00:03:29,103 so zero or greater. 83 00:03:30,060 --> 00:03:32,410 Out of all three of these properties right here 84 00:03:33,690 --> 00:03:36,810 only the first name and the last name properties 85 00:03:36,810 --> 00:03:38,463 are required to be defined. 86 00:03:39,450 --> 00:03:42,690 So we can kind of imagine that a valid person object 87 00:03:42,690 --> 00:03:45,813 might have a structure that looks a little bit like this. 88 00:03:47,850 --> 00:03:49,410 So, it might be an object 89 00:03:49,410 --> 00:03:52,800 that has a first name property that is a string. 90 00:03:52,800 --> 00:03:56,370 So I'll say, I don't know a person's name, Alex 91 00:03:56,370 --> 00:03:58,020 and a last name property, 92 00:03:58,020 --> 00:04:00,360 which would also be a string of, 93 00:04:00,360 --> 00:04:03,300 I don't know, what's the last name, Smith. 94 00:04:03,300 --> 00:04:05,250 And then it must also have an age 95 00:04:05,250 --> 00:04:07,800 that is an integer in at least zero. 96 00:04:07,800 --> 00:04:09,153 So maybe 10 like so. 97 00:04:10,050 --> 00:04:11,640 So this over here on the left hand side 98 00:04:11,640 --> 00:04:14,250 is our JSON Schema file, 99 00:04:14,250 --> 00:04:16,709 this over here is the actual data. 100 00:04:16,709 --> 00:04:19,563 We use the schema file to validate the data. 101 00:04:20,490 --> 00:04:21,930 What I put down for our data over here 102 00:04:21,930 --> 00:04:24,180 on the right hand side is currently valid, 103 00:04:24,180 --> 00:04:27,900 but if I say made my age less than zero, 104 00:04:27,900 --> 00:04:29,610 so like negative 10 105 00:04:29,610 --> 00:04:31,290 then it would now be invalid 106 00:04:31,290 --> 00:04:33,630 because we had said that age must be an integer 107 00:04:33,630 --> 00:04:35,730 with a minimum of zero. 108 00:04:35,730 --> 00:04:39,300 In addition, if I removed, say the last name property 109 00:04:39,300 --> 00:04:42,000 now my object over here is no longer valid as well 110 00:04:42,000 --> 00:04:43,860 because we had said that last name 111 00:04:43,860 --> 00:04:46,503 is a required property on this object. 112 00:04:47,490 --> 00:04:49,890 Okay, so that's just a very quick example 113 00:04:49,890 --> 00:04:52,140 of what a schema file looks like. 114 00:04:52,140 --> 00:04:54,600 Now, it might look a little bit scary right here, 115 00:04:54,600 --> 00:04:57,360 you have to memorize all these kind of property thing 116 00:04:57,360 --> 00:04:59,100 and these types and minimum 117 00:04:59,100 --> 00:05:00,420 but there's actually a tool 118 00:05:00,420 --> 00:05:01,680 that I will show you very shortly 119 00:05:01,680 --> 00:05:05,940 that makes generating JSON Schema very very straightforward. 120 00:05:05,940 --> 00:05:07,380 So let's take a quick pause right here 121 00:05:07,380 --> 00:05:09,540 now that we have a better idea of what we're doing 122 00:05:09,540 --> 00:05:12,030 and we'll start implementing our middleware 123 00:05:12,030 --> 00:05:13,030 in the next section.