1 00:00:00,660 --> 00:00:05,280 Now that we've had a tremendous amount of side discussion around reducers it's time to actually implement 2 00:00:05,310 --> 00:00:06,730 our posts reducer. 3 00:00:06,750 --> 00:00:09,060 Now I kind of have some bad news for you. 4 00:00:09,090 --> 00:00:13,800 It turns out that having learned all this kind of new syntax over here it turns out we don't actually 5 00:00:13,800 --> 00:00:17,810 need any of this syntax for the reducer that we are working on right now. 6 00:00:17,820 --> 00:00:22,610 We will need it on another reducer that we're going to work on inside this application very very shortly. 7 00:00:22,620 --> 00:00:25,820 But right now we don't have to do anything that fancy inside of here. 8 00:00:26,190 --> 00:00:30,770 All right so to get started I'm going to remove all the code that I had inside there. 9 00:00:30,820 --> 00:00:34,440 I'm going to make sure that I've got my arguments of state in action. 10 00:00:34,500 --> 00:00:40,080 Our post producer is supposed to maintain a list of posts that we have fetched from that Jay sun API 11 00:00:40,590 --> 00:00:44,880 because this is supposed to be dealing with an array or a list of records. 12 00:00:44,880 --> 00:00:50,030 Eventually I'm going to default my state argument appear to be an empty array. 13 00:00:50,070 --> 00:00:54,790 So the very first time that this thing gets called we're going to return this empty array. 14 00:00:55,950 --> 00:01:01,230 Then inside of this reducer we're going to inspect the actions type. 15 00:01:01,230 --> 00:01:09,540 So say if action type is equal to and we're going to watch for the action of type fecche posts whenever 16 00:01:09,540 --> 00:01:14,700 we see that type right there that means that we have gotten an action with the response from RJC on 17 00:01:14,700 --> 00:01:21,830 API so not going to save actual type is equal to fetch is. 18 00:01:22,070 --> 00:01:24,270 Then I'm going to return action. 19 00:01:24,290 --> 00:01:26,490 Payload like so. 20 00:01:26,700 --> 00:01:30,750 And then of course I want to make sure that I handled the case in which we have not found an appropriate 21 00:01:30,750 --> 00:01:34,990 action type so I'm going to say at the bottom return state. 22 00:01:35,080 --> 00:01:39,340 So if we ever see an action that does not have the type fetch posts we're not going to worry about the 23 00:01:39,340 --> 00:01:39,960 action at all. 24 00:01:39,970 --> 00:01:45,580 We're just going to return the state that we had previously because remember we always have to not return 25 00:01:45,610 --> 00:01:48,190 undefined from a producer. 26 00:01:48,210 --> 00:01:52,680 Now the syntax you see right here is the same syntax that we've worked with previously back on the last 27 00:01:52,680 --> 00:01:58,290 application but it's not actually the usual syntax you're going to see inside of or douceur in order 28 00:01:58,290 --> 00:02:04,080 to make sure that we always handle every action that comes into every douceur without air error we very 29 00:02:04,080 --> 00:02:09,080 frequently use a switch statement as opposed to an IF statement inside of reducer. 30 00:02:09,090 --> 00:02:13,200 So let me show you what that would look like rather than having that if statement and the return at 31 00:02:13,200 --> 00:02:13,850 the bottom. 32 00:02:14,010 --> 00:02:21,200 We would instead have a switch statement a switch statement is valid javascript syntax this is not react 33 00:02:21,200 --> 00:02:23,300 specific it's not redux specific. 34 00:02:23,930 --> 00:02:29,630 For the switch we're going to take a look at the action duct tape type property and then we will define 35 00:02:29,660 --> 00:02:31,700 a couple of cases inside of here. 36 00:02:31,970 --> 00:02:38,990 So I'm going to first define a case of fetch oats and then I'll put a colon after that and then underneath 37 00:02:38,990 --> 00:02:41,600 that case I'm going to put down what I want to do. 38 00:02:41,690 --> 00:02:46,640 If the action not type property is equal to the string fetch underscore posts. 39 00:02:46,820 --> 00:02:53,230 If that is the case then I want to return action payload. 40 00:02:53,240 --> 00:02:58,010 So in practice if we end up having a lot of types that a single reducer cares about you'll end up seeing 41 00:02:58,040 --> 00:03:02,990 a lot of case statements so you'll see like one case you'll see another case for another type and another 42 00:03:02,990 --> 00:03:04,050 case for another type. 43 00:03:04,130 --> 00:03:06,900 And we just add them all into this switch statement. 44 00:03:07,160 --> 00:03:11,080 In this case producer is only ever going to care about the type fecche posts. 45 00:03:11,150 --> 00:03:15,050 So we don't have to worry about adding in any other case statements. 46 00:03:15,150 --> 00:03:18,620 Now let's make sure that we always return some value from our reducer. 47 00:03:18,710 --> 00:03:22,840 We're always going to add in a default case to our switch statement. 48 00:03:22,940 --> 00:03:29,270 So if we do not match the case of fecche posts once said fall through to the default Keystone here and 49 00:03:29,270 --> 00:03:34,940 in the default case the case in which we do not have a action type that matches fetch posts are going 50 00:03:34,940 --> 00:03:40,350 to simply return state like so. 51 00:03:40,370 --> 00:03:46,460 All right so what you see right here is extremely common syntax to see inside of reducers the if statements. 52 00:03:46,460 --> 00:03:47,710 We were working with before. 53 00:03:47,780 --> 00:03:48,910 Definitely not very common. 54 00:03:48,920 --> 00:03:52,510 I just kept it very simple so you could very easily see what was going on. 55 00:03:52,550 --> 00:03:57,020 It is much more common to see inside of reducer a switch statement that looks exactly like this. 56 00:03:57,110 --> 00:04:01,860 Although frankly you will have many other cases besides just the one that we have. 57 00:04:01,900 --> 00:04:02,130 OK. 58 00:04:02,150 --> 00:04:04,020 So this is looking pretty good. 59 00:04:04,040 --> 00:04:06,980 So let's take a pause right here and we'll continue in the next video.