1 00:00:00,810 --> 00:00:04,830 The solution we have put together now allows TypeScript to take a look inside of each of our different 2 00:00:04,830 --> 00:00:09,780 cases and make sure that we are using the action in an appropriate way to, for example, inside this 3 00:00:09,780 --> 00:00:15,330 search repository success case right here, TypeScript knows that the action is of type search repository 4 00:00:15,330 --> 00:00:20,340 success section, which means it has a payload property that is an array of strings. 5 00:00:20,760 --> 00:00:27,060 If we take that payload property and tried to assign it to air right here like so we'll get an error 6 00:00:27,060 --> 00:00:32,340 because now TypeScript is saying you are trying to take an array of strings and assign it to a property 7 00:00:32,340 --> 00:00:35,850 that is supposed to be either a string or not. 8 00:00:36,600 --> 00:00:37,490 So this is pretty good. 9 00:00:37,500 --> 00:00:40,920 We have added in some reasonable amount of type checking inside of our reducers. 10 00:00:41,640 --> 00:00:44,550 There's just a couple of kind of usability issues inside of you. 11 00:00:44,580 --> 00:00:50,760 Now, first off, adding in this gigantic type annotation for our action argument is going to get pretty 12 00:00:50,760 --> 00:00:51,750 tedious really quickly. 13 00:00:52,260 --> 00:00:57,810 So another way that we might decide to write all this stuff out is right above our producer say type. 14 00:00:58,680 --> 00:01:05,519 Action is going to be and then copy over really cut and paste this kind of or really it's a type of 15 00:01:05,519 --> 00:01:06,720 union is what we call this. 16 00:01:07,170 --> 00:01:10,860 So I'm going to cut all that and paste it in like so. 17 00:01:11,660 --> 00:01:14,970 So we've now got a new type inside of application called action. 18 00:01:15,210 --> 00:01:20,430 And this represents all different possible actions that can be processed by all of our different reducers. 19 00:01:21,210 --> 00:01:24,000 Not going to use that at action like so. 20 00:01:25,690 --> 00:01:26,610 And that's pretty much it. 21 00:01:28,840 --> 00:01:33,790 The other thing that I would really like to somehow improve just a little bit, just like inside of 22 00:01:33,790 --> 00:01:40,330 a normal redox JavaScript project, we have now duplicated some strings instead of reducers and up inside 23 00:01:40,480 --> 00:01:42,280 of our interfaces as well. 24 00:01:43,810 --> 00:01:48,460 And whenever we start to put together our actual action creators, we're going to need to use these 25 00:01:48,460 --> 00:01:50,770 same strings over inside those action creators, too. 26 00:01:51,610 --> 00:01:55,540 So I think that duplicating all these strings and all these different locations probably not a good 27 00:01:55,540 --> 00:01:55,930 idea. 28 00:01:56,530 --> 00:02:00,280 So to handle this in a slightly better fashion, once again, right above the reducer. 29 00:02:00,310 --> 00:02:04,300 I'm going to add in an enum called action type. 30 00:02:05,080 --> 00:02:08,160 If you're not familiar with an enum, it's essentially kind of like an object. 31 00:02:08,320 --> 00:02:13,630 It sets up a variety of different properties that all have a very closely related definition, are very 32 00:02:13,630 --> 00:02:14,880 closely related, meaning. 33 00:02:15,520 --> 00:02:20,020 So inside of our enum, we're going to list out all the different possible action types that we're going 34 00:02:20,020 --> 00:02:24,370 to have across all different actions, all different action creators and all different reducers. 35 00:02:25,070 --> 00:02:29,530 So inside of here, I'm going to write out search repositories. 36 00:02:29,530 --> 00:02:36,880 And if you want to be like really reduc see here, we would kind of put in search repositories all capitals. 37 00:02:38,630 --> 00:02:40,650 Like, so it is not required to do all capitals. 38 00:02:40,670 --> 00:02:44,450 Again, this is kind of convention and I'm going to set that equal to search. 39 00:02:45,630 --> 00:02:48,100 Repositories come at the end. 40 00:02:48,930 --> 00:02:51,150 Well, then repeat that for our other two action types. 41 00:02:51,180 --> 00:02:52,170 So search. 42 00:02:54,210 --> 00:02:55,530 Repositories. 43 00:02:56,690 --> 00:02:57,530 Success. 44 00:03:01,080 --> 00:03:02,430 And then finally search. 45 00:03:03,640 --> 00:03:05,650 Repositories, air. 46 00:03:10,870 --> 00:03:14,800 Now, again, just a little bit more on items, if we ever want to refer to these different properties 47 00:03:14,800 --> 00:03:20,800 and access the strings we have assigned to them, we would do something like action type search repositories 48 00:03:20,800 --> 00:03:21,940 or action type. 49 00:03:24,510 --> 00:03:30,450 Search repositories success, so now we can use this enum to access all these different action types 50 00:03:30,450 --> 00:03:34,800 rather than writing out the raw strings, which again is usually bad because we're just duplicating 51 00:03:34,830 --> 00:03:37,470 these strings all around and it's very easy to make a typo inside them. 52 00:03:38,350 --> 00:03:43,480 So to make use that, we could then go down to our switch statement and replace all these strings with 53 00:03:43,600 --> 00:03:47,380 something like action type dot search repositories. 54 00:03:49,490 --> 00:03:52,940 Action type search repository success. 55 00:03:54,660 --> 00:03:58,860 And then action type search repositories, er. 56 00:04:00,290 --> 00:04:04,370 Most are going to clean up that comment right there, because I was just there for informational purposes. 57 00:04:05,650 --> 00:04:07,190 OK, that's definitely a good improvement. 58 00:04:07,350 --> 00:04:08,710 Now, the last thing that we can do. 59 00:04:09,980 --> 00:04:15,530 Is referred to the Inam for finding the actual values of these strings inside of our three different 60 00:04:15,530 --> 00:04:16,680 interfaces as well. 61 00:04:16,700 --> 00:04:21,200 So, again, rather than hard coding in these strings to these interfaces, for the first type, we 62 00:04:21,200 --> 00:04:24,530 could put in action type thought search repositories. 63 00:04:28,090 --> 00:04:31,150 Type dot search repositories success. 64 00:04:32,470 --> 00:04:35,560 And action type search repositories, air. 65 00:04:37,450 --> 00:04:42,790 All right, that's pretty much it, so this file right here is a really good example of how to set up 66 00:04:42,790 --> 00:04:45,640 a producer, how to type our different actions. 67 00:04:46,610 --> 00:04:53,210 How to apply those action types inside of reducer, how to set up an action type enum and make use of 68 00:04:53,210 --> 00:04:54,740 that inside of a reducer? 69 00:04:55,610 --> 00:05:01,480 And our action type interfaces as well, so this right now is a pretty, pretty good example. 70 00:05:01,490 --> 00:05:02,450 I'm pretty happy with this. 71 00:05:03,080 --> 00:05:09,350 The one improvement that I would like to make to it is to extract these interface definitions and extract 72 00:05:09,350 --> 00:05:14,990 the action types enum into separate files just to make sure that we can reuse this enum inside of other 73 00:05:14,990 --> 00:05:19,430 reducers very easily and also make sure that we can access this inside of our different action creatures 74 00:05:19,430 --> 00:05:19,890 as well. 75 00:05:20,420 --> 00:05:24,920 We will eventually want to also make use of these interfaces inside of our action creators to. 76 00:05:26,390 --> 00:05:31,910 The last thing we're going to do is take all the stuff that we have now created and split it up into 77 00:05:31,910 --> 00:05:37,070 a couple of different files and folders based upon exactly what part of our redux side of things it 78 00:05:37,070 --> 00:05:38,000 actually implements. 79 00:05:38,430 --> 00:05:41,290 So let's take care of this little reorganization in the next video.