1 00:00:01,520 --> 00:00:05,090 Now that we've got these three different interfaces, we're going to use them inside of our reducer, 2 00:00:05,510 --> 00:00:06,860 so little bit of typing here. 3 00:00:07,100 --> 00:00:11,060 I'm going to go down to my action argument and I'm going to update its type annotation. 4 00:00:11,570 --> 00:00:13,670 We don't really have an interface called action anymore. 5 00:00:13,670 --> 00:00:14,570 So I'm going to remove that. 6 00:00:15,170 --> 00:00:20,660 And I'm going to say that whenever we receive an action, we know for 100 percent certainty that that 7 00:00:20,660 --> 00:00:25,430 object that we receive are really the argument that we receive for action right here is going to meet 8 00:00:25,430 --> 00:00:28,160 or satisfy the interface of search repositories. 9 00:00:28,160 --> 00:00:29,420 Action or this one. 10 00:00:29,420 --> 00:00:30,080 Or this one. 11 00:00:30,940 --> 00:00:35,950 So to properly annotate action as saying it's going to be one of these three different interfaces, 12 00:00:36,400 --> 00:00:43,330 I'm going to put down the first one and then a single pipe right there and then the success. 13 00:00:46,240 --> 00:00:47,110 And then the air. 14 00:00:48,530 --> 00:00:52,910 Like, so I'm going to save that automatically kind of collapse, is it to be like so? 15 00:00:54,790 --> 00:00:59,500 So now we are being told right here that whenever we call our reducer, we're going to have this action 16 00:00:59,520 --> 00:01:05,280 argument and it will be of type search a positive reaction or success or air. 17 00:01:06,480 --> 00:01:08,800 It's now down inside of our switch statement, you'll notice. 18 00:01:08,850 --> 00:01:10,460 We're not getting any errors here. 19 00:01:10,740 --> 00:01:16,350 And if I mouseover say action, not pela right here, I am told that this will be an array of strings. 20 00:01:16,740 --> 00:01:22,920 And if I mouseover the air property or where we assign air for the air case by mouseover action, not 21 00:01:22,920 --> 00:01:25,110 payload, you'll notice that says that it is a string. 22 00:01:25,560 --> 00:01:27,480 So what exactly is going on inside of your. 23 00:01:28,360 --> 00:01:33,970 Well, I want to remind you about a topic inside of typescript called Type Guards', if I go right above 24 00:01:33,970 --> 00:01:39,550 my switch statement and I put in just action and then mouseover typescript at this point in time thinks 25 00:01:39,550 --> 00:01:41,950 that this action argument is going to be of type. 26 00:01:42,860 --> 00:01:47,990 Repositories action or success or air, which is 100 percent accurate, but at some point in time, 27 00:01:47,990 --> 00:01:50,500 we want to kind of narrow down that type of action. 28 00:01:50,720 --> 00:01:58,340 We want to figure out if this is an action that is a repository, is action or success or er to do so, 29 00:01:58,670 --> 00:02:04,850 we can write out a little if statement and we can say something like action type equal to let's try 30 00:02:05,240 --> 00:02:07,010 search repositories success. 31 00:02:08,449 --> 00:02:14,210 So this is functioning as a type guard, if this if statement is true and we end up inside of it, then 32 00:02:14,210 --> 00:02:19,820 we know with 100 percent certainty that this action argument that we just received, this action object 33 00:02:19,820 --> 00:02:27,080 right here, must be an object satisfying this interface, because only this interface is saying that 34 00:02:27,080 --> 00:02:30,170 our object has a type of search repositories that success. 35 00:02:31,190 --> 00:02:34,280 So inside of here, we know with 100 percent certainty. 36 00:02:35,530 --> 00:02:38,260 That action satisfies the. 37 00:02:39,220 --> 00:02:44,140 Search repositories, success action interface. 38 00:02:46,350 --> 00:02:50,700 And because of that, because it satisfies that interface, we know further with 100 percent certainty 39 00:02:51,090 --> 00:02:55,710 that it's Pelloux property exists, it does have a payload property and that payload property is an 40 00:02:55,710 --> 00:02:56,640 array of strings. 41 00:02:57,610 --> 00:03:03,820 So down here, if I now do action, payload and mouse over, that typescript says, yeah, this is definitely 42 00:03:03,820 --> 00:03:07,930 a success action and that payload property is definitely an array of strings. 43 00:03:09,790 --> 00:03:14,800 So this is the real key to how we are going to write out our reducers whenever we put in this action 44 00:03:14,800 --> 00:03:20,380 argument, we're going to somehow say that the action argument is one of all these different kinds of 45 00:03:20,500 --> 00:03:22,540 actions that we have inside of application. 46 00:03:22,930 --> 00:03:27,460 We're going to define a separate interface for every kind of action we ever put together. 47 00:03:28,290 --> 00:03:33,060 Then inside of our reducers, we can use type guards like this to figure out what kind of action it 48 00:03:33,060 --> 00:03:36,720 really is and help TypeScript further understand what kind of action it really is. 49 00:03:37,140 --> 00:03:39,330 But obviously, we're not really writing out this if statement. 50 00:03:39,510 --> 00:03:43,890 It turns out that switch statements function as type guards in typescript as well. 51 00:03:44,430 --> 00:03:50,040 So TypeScript is 100 percent aware that if we go into the switch statement and the actions type is equal 52 00:03:50,040 --> 00:03:56,700 to, say, search repository success, then inside this case we are just like above in the if statement, 53 00:03:56,700 --> 00:03:57,810 100 percent certain. 54 00:03:58,730 --> 00:04:03,110 That action is Zorch repositories. 55 00:04:04,130 --> 00:04:10,790 Success action, and again, that means that our action has a value property that is an array of strings. 56 00:04:12,040 --> 00:04:15,340 So this is a key and again, this is like a really tough thing to understand. 57 00:04:15,760 --> 00:04:18,680 So I'm going to undo that statement and a little action right above. 58 00:04:18,730 --> 00:04:21,180 We're going to take a quick pause and continue in just a moment.