1 00:00:00,950 --> 00:00:06,230 Unless video we put together an array based approach for our Stream reducer or handling specifically 2 00:00:06,260 --> 00:00:07,900 at it stream case. 3 00:00:07,990 --> 00:00:12,730 The reason I wrote out the sample code right here was just to show you that to handle replacing a record 4 00:00:12,760 --> 00:00:16,620 inside of an array we have to write out a pretty decent amount of logic. 5 00:00:16,690 --> 00:00:22,000 So we're now going to take a look at a object based approach instead and with this object based approach 6 00:00:22,060 --> 00:00:26,650 we're going to have dramatically less code to write out and there's going to be a couple of other very 7 00:00:26,650 --> 00:00:28,570 big benefits as well. 8 00:00:28,570 --> 00:00:32,920 Now I want to remind you again that the code I'm writing inside this file is all temporary. 9 00:00:32,920 --> 00:00:35,320 I'm going to delete this code in just a little bit. 10 00:00:35,320 --> 00:00:38,890 I just want you to see the code for yourself on the screen. 11 00:00:38,890 --> 00:00:44,290 All right so I got to go down to the bottom the file and I'll write out an object based approach. 12 00:00:44,380 --> 00:00:51,260 So down here I will again create a stream reducer this will have a default state argument but this time 13 00:00:51,290 --> 00:00:56,650 it is going to be an object as opposed to an array. 14 00:00:56,790 --> 00:01:05,480 Then inside of your I will switch over my action type allowed on my default case and I'll also add on 15 00:01:05,480 --> 00:01:07,550 the case of edit stream as well. 16 00:01:07,550 --> 00:01:14,680 So once again I want to imagine how easily we can update a stream when we are using an object. 17 00:01:14,680 --> 00:01:17,420 So to do so I would probably write out something that looks like this. 18 00:01:17,420 --> 00:01:19,230 Let me show you exactly what I would probably do. 19 00:01:19,310 --> 00:01:24,010 I would probably say something like new state is going to be a object. 20 00:01:24,380 --> 00:01:29,300 I'm going to take all the key value pairs out of states and spread them in there with the dot dot dot 21 00:01:29,300 --> 00:01:30,230 syntax. 22 00:01:30,530 --> 00:01:35,720 So all this line right here is doing is creating a brand new object that has all the same key value 23 00:01:35,720 --> 00:01:38,390 pairs as the state object right here. 24 00:01:38,390 --> 00:01:43,570 Now the reason that I have this line of code right here is just to return a new object from my reducer 25 00:01:43,880 --> 00:01:48,920 remember a while ago we took a look at the source code of redux and we saw that if we do not return 26 00:01:48,950 --> 00:01:54,200 a brand new object redux is going to assume that we did not update anything from a producer. 27 00:01:54,470 --> 00:02:00,140 So this line of code right here is just to update that object or just to create a new object. 28 00:02:00,140 --> 00:02:05,120 So now that we have created the new object we want to somehow update the appropriate key value pair 29 00:02:05,120 --> 00:02:07,150 inside of it. 30 00:02:07,160 --> 00:02:12,200 So now in this approach we're going to have the IDs or I mean the keys be the idea of the stream and 31 00:02:12,200 --> 00:02:15,090 then the value will be the stream itself. 32 00:02:15,130 --> 00:02:22,310 So our ID is on that action object and the actual stream itself is on the action object as well. 33 00:02:22,370 --> 00:02:29,870 So I could write out something like new state and I will use the property accessor notation here to 34 00:02:29,870 --> 00:02:31,990 reference action payload. 35 00:02:32,120 --> 00:02:41,020 ID as a reminder action that payload is the stream and the stream object contains the ID of the stream 36 00:02:41,110 --> 00:02:43,500 as it was assigned up by our API. 37 00:02:43,960 --> 00:02:48,930 So this is going to access our state object specifically at some given ID. 38 00:02:49,060 --> 00:02:53,960 And we're going to set that equal to our new stream like so. 39 00:02:54,070 --> 00:02:59,040 And then finally I can return new state OK. 40 00:02:59,060 --> 00:03:02,360 So that's what it would look like with an object based approach. 41 00:03:02,360 --> 00:03:05,110 Now when you look at this it still doesn't look that great. 42 00:03:05,120 --> 00:03:10,400 We still have three lines of code right here just to create a new object assign a property to it overwriting 43 00:03:10,430 --> 00:03:13,340 any existing property there is and then return it. 44 00:03:13,340 --> 00:03:18,550 So at present it's not really a great improvement over our edit stream up here. 45 00:03:18,590 --> 00:03:24,410 We still have some complicated syntax inside there but it turns out that there's a little bit of yes 46 00:03:24,410 --> 00:03:29,300 47 20:15 syntax that we can use to significantly reduce the amount of code that we have to write right 48 00:03:29,300 --> 00:03:30,170 here. 49 00:03:30,230 --> 00:03:34,460 So I'm going to comment that out I'm going to show you an alternate approach. 50 00:03:34,460 --> 00:03:38,660 This alternate approach is going to do the exact same thing that you see right here but it's going to 51 00:03:38,660 --> 00:03:41,460 do it all in a single line of code. 52 00:03:41,990 --> 00:03:46,310 So I'm going to write out return a new object. 53 00:03:46,310 --> 00:03:47,740 Dot dot dot state. 54 00:03:47,810 --> 00:03:49,370 And then here's where it gets crazy. 55 00:03:49,370 --> 00:03:52,970 I'm going to put in square brackets action. 56 00:03:53,000 --> 00:04:01,040 Payload dot ID I'll close off the square bracket or then put in a colon and then I will assign action 57 00:04:01,040 --> 00:04:04,130 not payload like so. 58 00:04:04,160 --> 00:04:07,080 All right so that's the crazy as 20:15 syntax. 59 00:04:07,400 --> 00:04:12,900 So the code that you see right here is identical to what you see right here. 60 00:04:13,070 --> 00:04:15,260 The syntax you see right here with the square brackets. 61 00:04:15,260 --> 00:04:18,620 This is not creating an array even though it looks like an array. 62 00:04:18,620 --> 00:04:21,500 It is not an array of being created. 63 00:04:21,590 --> 00:04:23,620 This is what is referred to as key. 64 00:04:23,630 --> 00:04:25,160 Interpellation. 65 00:04:25,160 --> 00:04:29,840 So this essentially means we don't know exactly what key we want to add to the object. 66 00:04:29,870 --> 00:04:35,480 We know that the action not payload id property is the key that we want to add but we want to somehow 67 00:04:35,570 --> 00:04:36,870 add it in that key. 68 00:04:36,950 --> 00:04:40,060 Like when this code runs we don't know what the key is ahead of time. 69 00:04:40,220 --> 00:04:43,120 So in other words I can't write out something here like five. 70 00:04:43,190 --> 00:04:48,930 I can't hard code the key because I don't know what the ID of the stream is going to be. 71 00:04:48,950 --> 00:04:56,220 So by using the syntax we are saying look at the action of payload id property look at that idea whatever 72 00:04:56,220 --> 00:05:02,340 the ideas whatever the number or string or value is take that and create a new key using it inside of 73 00:05:02,340 --> 00:05:07,750 this overall object and to that key a sign action not payload. 74 00:05:07,850 --> 00:05:11,070 Like I said this approach right here and this approach right here. 75 00:05:11,090 --> 00:05:12,290 Totally identical. 76 00:05:12,440 --> 00:05:15,140 But the second approach is far more concise. 77 00:05:15,410 --> 00:05:21,110 So now I could delete that commented out stuff and I'm left with just what you see right here. 78 00:05:21,110 --> 00:05:25,730 And so I think that at this point you would agree with me that this code is far more simple and straightforward 79 00:05:25,940 --> 00:05:30,440 than the array based approach appear even though it has that crazy new syntax. 80 00:05:30,470 --> 00:05:34,010 You still are going to eventually understand what is going here. 81 00:05:34,190 --> 00:05:39,590 What is going on here far more easily than if you had to read out that entire map statement in the array 82 00:05:39,590 --> 00:05:41,340 based approach up your. 83 00:05:41,500 --> 00:05:41,800 OK. 84 00:05:41,810 --> 00:05:46,730 Now as one last quick thing just to show you very quickly and make sure that the syntax is very clear. 85 00:05:46,760 --> 00:05:51,290 I want to flip on over to my chrome console and write out a quick example to show you exactly how the 86 00:05:51,290 --> 00:05:52,470 syntax works. 87 00:05:52,490 --> 00:05:55,260 So if you already understand the syntax puzzle that you're right here. 88 00:05:55,340 --> 00:05:56,440 Otherwise stick around. 89 00:05:56,450 --> 00:05:59,060 And we're going to go through a very quick example. 90 00:05:59,790 --> 00:06:00,080 OK. 91 00:06:00,080 --> 00:06:05,240 So to help you understand that syntax I'm going to flip back over to my application and open up my console 92 00:06:05,900 --> 00:06:13,400 and then inside if you're going to create a new object that I'm going to call animal sounds. 93 00:06:13,430 --> 00:06:17,630 So this is going to be an object that has some key value pairs inside of it of the different sounds 94 00:06:17,630 --> 00:06:18,860 that animals make. 95 00:06:18,860 --> 00:06:24,330 So for example a cat goes meow and a dog goes bark. 96 00:06:24,350 --> 00:06:28,550 So going to create that object and then we'll imagine that at some point in time in the future we want 97 00:06:28,550 --> 00:06:33,830 to add in a new key value pair but the keys and the values that we want to add in are already assigned 98 00:06:33,830 --> 00:06:37,400 to some array or some means to some variables. 99 00:06:37,580 --> 00:06:46,440 So let's say that we want to add in a new animal of lion and the sound that it makes is roar. 100 00:06:46,450 --> 00:06:52,220 So now I want to use the animal and sound variables to add in a new key value pair to animal sounds. 101 00:06:52,360 --> 00:07:00,920 So to do so I could write out Crilley brace dot dot dot animal sounds all then do the square bracket 102 00:07:00,980 --> 00:07:04,070 and put in animal clothes off the square bracket. 103 00:07:04,070 --> 00:07:07,740 I'll put in a colon and then sound like so. 104 00:07:08,290 --> 00:07:14,390 So now this is going to say take whatever string animal references and added as a new key to this object. 105 00:07:14,570 --> 00:07:17,550 And for the value use the sound variable. 106 00:07:17,600 --> 00:07:23,050 Now I can run this and I'll see that I get cat meow dog bark lion roar. 107 00:07:23,060 --> 00:07:23,810 All right so that's it. 108 00:07:23,810 --> 00:07:26,230 Now again the syntax here I can't say it enough. 109 00:07:26,240 --> 00:07:27,870 We are not creating an array. 110 00:07:27,890 --> 00:07:29,680 This is not an array. 111 00:07:29,690 --> 00:07:32,100 This is string interpellation or something. 112 00:07:32,100 --> 00:07:37,430 The key interpellation syntax not string interpolation string interpellation different thing. 113 00:07:37,430 --> 00:07:41,390 All right so now we have a better idea of what's going on here we'll take a quick break right here and 114 00:07:41,390 --> 00:07:45,960 when we continue in the next video we're going to start putting together our real stream reducer.