1 00:00:01,230 --> 00:00:02,063 Instructor: In the last section, 2 00:00:02,063 --> 00:00:05,010 we spoke about how we're going to use a JSON Schema document 3 00:00:05,010 --> 00:00:07,140 to validate our Redux State. 4 00:00:07,140 --> 00:00:08,940 We're gonna do a little bit more footwork 5 00:00:08,940 --> 00:00:09,870 inside this section, 6 00:00:09,870 --> 00:00:11,760 so we're going to install the actual library 7 00:00:11,760 --> 00:00:13,710 that's gonna handle the validation for us. 8 00:00:13,710 --> 00:00:15,150 And I'm also gonna show you a tool 9 00:00:15,150 --> 00:00:18,690 that you can use to generate a JSON Schema definition 10 00:00:18,690 --> 00:00:20,880 for your own personal projects. 11 00:00:20,880 --> 00:00:22,530 So first, let's install the library 12 00:00:22,530 --> 00:00:24,540 that we're going to use for validation. 13 00:00:24,540 --> 00:00:25,980 Back over at my terminal. 14 00:00:25,980 --> 00:00:28,020 I'm gonna kill my running server, 15 00:00:28,020 --> 00:00:33,020 and I'm going to install a library called tv4. 16 00:00:33,030 --> 00:00:35,940 So tv4 stands for Tiny Validator four. 17 00:00:35,940 --> 00:00:37,410 That's pretty much it. 18 00:00:37,410 --> 00:00:40,650 It's intended to take some data, a JSON Schema, 19 00:00:40,650 --> 00:00:41,850 and validate the data. 20 00:00:41,850 --> 00:00:42,683 That's it. 21 00:00:42,683 --> 00:00:44,370 That's all this library does. 22 00:00:44,370 --> 00:00:45,960 So we'll let that install kick in. 23 00:00:45,960 --> 00:00:46,793 And while it does, 24 00:00:46,793 --> 00:00:48,360 I'm gonna show you a very quick-tool 25 00:00:48,360 --> 00:00:50,730 that you can use to generate JSON Schema 26 00:00:50,730 --> 00:00:52,353 for your own projects. 27 00:00:53,310 --> 00:00:55,110 So I'm gonna open up a new browser tab, 28 00:00:55,110 --> 00:00:57,753 and go to jsonschema.net. 29 00:00:59,670 --> 00:01:01,230 At jsonschema.net, 30 00:01:01,230 --> 00:01:03,510 we enter in some amount of JSON 31 00:01:03,510 --> 00:01:05,610 over here on the left-hand side. 32 00:01:05,610 --> 00:01:08,100 And that generates the schema file 33 00:01:08,100 --> 00:01:09,660 that can be used to validate 34 00:01:09,660 --> 00:01:13,590 the structure and values inside that JSON data. 35 00:01:13,590 --> 00:01:15,090 So you can see that in this case, 36 00:01:15,090 --> 00:01:18,450 they've got an object with a property of "checked," 37 00:01:18,450 --> 00:01:20,160 and it's a boolean value. 38 00:01:20,160 --> 00:01:22,860 So if we now look inside this schema document over here, 39 00:01:22,860 --> 00:01:25,980 you'll see that it's a type of "object," 40 00:01:25,980 --> 00:01:28,110 it has properties of "checked," 41 00:01:28,110 --> 00:01:30,207 and type must be a "boolean." 42 00:01:31,140 --> 00:01:32,790 You'll see a bunch of other properties 43 00:01:32,790 --> 00:01:33,930 inside of here as well. 44 00:01:33,930 --> 00:01:37,290 So the tool that you're looking at is gonna try to generate 45 00:01:37,290 --> 00:01:40,950 a very well fleshed out JSON Schema document. 46 00:01:40,950 --> 00:01:42,780 We don't always have to put all the properties 47 00:01:42,780 --> 00:01:47,370 that you see in here inside of our JSON file or JSON Schema, 48 00:01:47,370 --> 00:01:49,290 a lot of these are optional. 49 00:01:49,290 --> 00:01:51,930 For example, like title and description. 50 00:01:51,930 --> 00:01:53,520 Title and description are meant to annotate 51 00:01:53,520 --> 00:01:55,860 the purpose of this like "checked" property 52 00:01:55,860 --> 00:01:57,570 that it's defining. 53 00:01:57,570 --> 00:01:59,190 So all we have to do is enter in 54 00:01:59,190 --> 00:02:01,830 our JSON data here on the left-hand side. 55 00:02:01,830 --> 00:02:04,320 Now, a quick thing to be really aware of, 56 00:02:04,320 --> 00:02:06,690 when we wrote out the Redux State right here, 57 00:02:06,690 --> 00:02:08,940 and as we usually think of our Redux State, 58 00:02:08,940 --> 00:02:12,540 usually it's in a JavaScript object format, 59 00:02:12,540 --> 00:02:14,850 which is a little bit different than JSON. 60 00:02:14,850 --> 00:02:17,580 So when we convert our Redux State to JSON, 61 00:02:17,580 --> 00:02:19,680 all we really have to do is make sure that we wrap 62 00:02:19,680 --> 00:02:23,100 all of our keys with double quotes. 63 00:02:23,100 --> 00:02:24,660 And we don't use any single quotes, 64 00:02:24,660 --> 00:02:28,320 we always use double quotes to represent strings as well. 65 00:02:28,320 --> 00:02:30,390 So I'm gonna first reset this thing, 66 00:02:30,390 --> 00:02:32,640 or maybe just delete everything inside of it. 67 00:02:33,750 --> 00:02:36,900 And now I'm going to enter in our current JSON Schema, 68 00:02:36,900 --> 00:02:39,390 or our current JSON structure. 69 00:02:39,390 --> 00:02:41,850 So we've got a key of "comments," 70 00:02:41,850 --> 00:02:44,580 and notice I'm using the double quotes there. 71 00:02:44,580 --> 00:02:45,960 It's gonna be an array, 72 00:02:45,960 --> 00:02:49,170 and it has values like comment number one, 73 00:02:49,170 --> 00:02:51,033 and comment number two. 74 00:02:52,920 --> 00:02:57,330 Then we also have that "auth" piece of state, 75 00:02:57,330 --> 00:02:59,880 and a sample value for it might be true. 76 00:02:59,880 --> 00:03:02,940 So all we have to do over here is enter in some sample data, 77 00:03:02,940 --> 00:03:05,730 and this tool will generate our schema for us. 78 00:03:05,730 --> 00:03:07,740 So now I'll submit this. 79 00:03:07,740 --> 00:03:09,420 And this is our schema that we can use 80 00:03:09,420 --> 00:03:13,080 to validate the structure of our Redux store. 81 00:03:13,080 --> 00:03:16,710 So we have a root type of "object," 82 00:03:16,710 --> 00:03:18,900 like that's what we're working with here, it's an object. 83 00:03:18,900 --> 00:03:20,970 It has property of "comments," 84 00:03:20,970 --> 00:03:22,740 which has to be an "array." 85 00:03:22,740 --> 00:03:26,880 And every item within that array must be of type "string." 86 00:03:26,880 --> 00:03:29,610 So if we start to enter in an integer to this thing, 87 00:03:29,610 --> 00:03:32,460 or an object, or an array, or anything like that, 88 00:03:32,460 --> 00:03:35,940 the JSON Schema is gonna fail our validation. 89 00:03:35,940 --> 00:03:37,650 You can also see that we have our "auth" property 90 00:03:37,650 --> 00:03:38,580 down here as well, 91 00:03:38,580 --> 00:03:41,130 so it must be of type "boolean." 92 00:03:41,130 --> 00:03:42,210 By default it's false, 93 00:03:42,210 --> 00:03:45,690 but the default in our case, not really super applicable. 94 00:03:45,690 --> 00:03:48,240 Okay, so we've now generated our JSON Schema, 95 00:03:48,240 --> 00:03:50,040 which means that we're now ready to start working 96 00:03:50,040 --> 00:03:53,970 on the actual middleware itself and do this validation. 97 00:03:53,970 --> 00:03:54,803 Now, I'll be honest with you, 98 00:03:54,803 --> 00:03:56,310 the actual code that we're gonna write 99 00:03:56,310 --> 00:03:58,140 is gonna be really straightforward. 100 00:03:58,140 --> 00:03:59,790 So a lot of the work around this middleware 101 00:03:59,790 --> 00:04:01,350 is just understanding exactly 102 00:04:01,350 --> 00:04:03,720 what this JSON Schema stuff is. 103 00:04:03,720 --> 00:04:04,560 So in the next section, 104 00:04:04,560 --> 00:04:06,900 we're gonna start to put together the middleware itself, 105 00:04:06,900 --> 00:04:10,320 and the code for it is gonna come together awfully quickly. 106 00:04:10,320 --> 00:04:12,920 So a quick break, and I'll see you in just a second.