1 00:00:00,720 --> 00:00:05,330 In class video we put together a bunch of different action creators inside of our actions index j s 2 00:00:05,340 --> 00:00:06,030 file. 3 00:00:06,060 --> 00:00:11,100 We did this all in one go just so we didn't have to come back over to this file nonstop throughout the 4 00:00:11,100 --> 00:00:15,790 rest of this application and talk about like the next action creator we had to put together. 5 00:00:15,810 --> 00:00:20,240 Now we're going to take a very similar approach for putting together our reduce or as well. 6 00:00:20,280 --> 00:00:25,350 We're going to start to work on our stream reducer inside this video and we're just going to put the 7 00:00:25,350 --> 00:00:31,680 entire seducer together in one go as opposed to having me kind of spread putting the reducer together 8 00:00:31,800 --> 00:00:35,310 around a couple of different videos throughout the rest of the application. 9 00:00:35,310 --> 00:00:39,480 Now for the producer we're going to put together we're going to do things just a little bit differently 10 00:00:39,540 --> 00:00:41,070 than we have in the past. 11 00:00:41,070 --> 00:00:46,310 So let me show you a couple of diagrams to help you understand exactly what I mean by differently. 12 00:00:46,330 --> 00:00:47,750 All right. 13 00:00:48,300 --> 00:00:53,500 So this right here is a diagram of more or less how we have been creating reducers throughout this course. 14 00:00:53,490 --> 00:00:59,310 Any time that we had a list of records that we wanted to maintain so we could as an option we could 15 00:00:59,310 --> 00:01:05,070 totally have a stream's producer that always returns an array of stream objects. 16 00:01:05,070 --> 00:01:10,690 So each of these little boxes right here represent a separate stream that has been created by a user. 17 00:01:10,710 --> 00:01:17,120 Remember that every stream object is going to have a title and a description assigned by the user. 18 00:01:17,190 --> 00:01:23,090 And it's also going to have an id property and that ID is going to be assigned by that API. 19 00:01:23,970 --> 00:01:28,710 So if we wanted to follow the same convention as we've seen throughout the course we could return an 20 00:01:28,710 --> 00:01:31,960 array that has a list of all these stream objects inside of it. 21 00:01:31,980 --> 00:01:35,960 Like I said this time around we're going to do things a little bit differently. 22 00:01:36,030 --> 00:01:40,020 And the reason that we're going to do this differently is that it's going to make many different operations 23 00:01:40,230 --> 00:01:45,280 around maintaining an array much easier than if we had a array. 24 00:01:46,010 --> 00:01:46,540 OK. 25 00:01:46,830 --> 00:01:49,010 So here's what we're going to do instead. 26 00:01:49,440 --> 00:01:51,440 So we are still going to have a stream producer. 27 00:01:51,510 --> 00:01:54,390 It's going to behave as a reduce or it usually would. 28 00:01:54,390 --> 00:01:57,170 So we're going to add it to the combined reducers call. 29 00:01:57,550 --> 00:02:04,680 But rather than returning an array of streams it is going to return an object that has all the streams 30 00:02:04,710 --> 00:02:06,140 inside of it. 31 00:02:06,240 --> 00:02:11,970 So we're going to return an object instead of an array inside a subject we're going to have a collection 32 00:02:11,970 --> 00:02:15,670 of key value pairs as you would expect inside of an object. 33 00:02:15,750 --> 00:02:20,150 The key for each of these key value pairs is going to be the ID of a stream. 34 00:02:20,430 --> 00:02:26,130 So let's say right here if we had a key of one the value for that would be the stream that has an idea 35 00:02:26,130 --> 00:02:27,000 of 1. 36 00:02:27,210 --> 00:02:35,220 If we have a key of 22 the value b the stream with ID 22 and if we had a key of 37 the value would be 37 00:02:35,220 --> 00:02:37,960 the stream with ID 37. 38 00:02:37,980 --> 00:02:43,500 So in order to kind of access any given stream inside this object we would just have to reference our 39 00:02:43,500 --> 00:02:50,550 streams piece of states out of our redux store and then essentially try to access the appropriate ID 40 00:02:50,550 --> 00:02:51,300 inside there. 41 00:02:51,360 --> 00:02:56,850 And that will give us the stream that we're looking for now besides making accessing records a little 42 00:02:56,850 --> 00:02:57,640 bit easier. 43 00:02:57,750 --> 00:03:03,340 Also modifying or updating data from our streams reducer will be a lot easier as well. 44 00:03:03,390 --> 00:03:06,960 So we looked at this chart right here a while ago. 45 00:03:06,960 --> 00:03:11,550 Now I want you to recall that one of the steps that we looked at was how we replace an element in an 46 00:03:11,550 --> 00:03:12,450 array. 47 00:03:12,480 --> 00:03:17,970 So this case right here of replacing an element in an array would be applied any time that we called 48 00:03:18,000 --> 00:03:21,670 our action creator of edits Stream right here. 49 00:03:21,690 --> 00:03:26,760 So whenever we call edit Stream we are attempting to update a stream on our API. 50 00:03:27,240 --> 00:03:29,610 So we make the request to update the stream. 51 00:03:29,820 --> 00:03:35,250 We then get the updated stream back as the response from the API and then we're going to dispatch an 52 00:03:35,250 --> 00:03:40,300 action of type at it Stream right here with our payload that has the stream inside of it. 53 00:03:40,370 --> 00:03:45,480 And so when we got back this updated stream we would probably want to find the original stream with 54 00:03:45,480 --> 00:03:51,420 the identical ID inside a very douceur and removed the old version of the stream and put in the new 55 00:03:51,420 --> 00:03:53,210 version right here. 56 00:03:53,250 --> 00:03:58,290 So if we wanted to do that with an array based approach we would have to write out some code like you 57 00:03:58,290 --> 00:03:59,240 see right here. 58 00:03:59,400 --> 00:04:03,560 We would have to map over all of our different stream records inside of the reducer. 59 00:04:03,750 --> 00:04:08,550 We would have to find the Stream but the idea that we cared about and then returned the newly updated 60 00:04:08,550 --> 00:04:16,610 stream but if we were making use of a object from Ari douceur the updating process would be much more 61 00:04:16,610 --> 00:04:17,730 straightforward. 62 00:04:17,960 --> 00:04:21,300 We would put down the curly braces to indicate a new object. 63 00:04:21,440 --> 00:04:25,970 We would take all the records out of our old state object and add them in and then we would add in a 64 00:04:25,970 --> 00:04:27,260 new key value pair. 65 00:04:27,260 --> 00:04:31,140 But in this case the key would be the ID of the stream that we just updated. 66 00:04:31,140 --> 00:04:37,580 So let's say if we updated stream with ID 65 we would put in a key of 65 and then the value would be 67 00:04:37,700 --> 00:04:41,690 stream with the ID is 65. 68 00:04:41,700 --> 00:04:48,270 So basically the syntax here of updating our state is going to be so much easier when we are making 69 00:04:48,270 --> 00:04:50,780 use of an object instead of an array. 70 00:04:50,790 --> 00:04:55,140 Now to make this really kind of sink in and help you really understand this I want to write out a little 71 00:04:55,140 --> 00:04:56,500 bit of sample code. 72 00:04:56,670 --> 00:05:01,260 So I want to write out a little sample code to show you how we would update a record inside of an array 73 00:05:01,530 --> 00:05:06,120 if we were using the array based approach and then do the same thing with an object as well. 74 00:05:06,180 --> 00:05:07,790 And you're going to very quickly see that. 75 00:05:07,800 --> 00:05:08,060 Yup. 76 00:05:08,100 --> 00:05:12,990 If we use an object to store all of our records life is going to be much easier. 77 00:05:13,050 --> 00:05:17,860 So I'm going to flip back over to my editor and I'm going to open up a brand new file. 78 00:05:18,030 --> 00:05:19,350 I'm not going to save this file. 79 00:05:19,350 --> 00:05:22,060 This is just some sample code. 80 00:05:22,890 --> 00:05:24,370 So you do not have to write this out. 81 00:05:24,390 --> 00:05:28,830 I just want to very quickly show you how much code we have to write out to update records when we are 82 00:05:28,830 --> 00:05:35,510 making use of an array inside of a reducer All right I'm going to first do the array based approach 83 00:05:36,860 --> 00:05:43,570 so I would have something like stream reducer and I'm going to default my state to be an empty array 84 00:05:43,990 --> 00:05:47,860 because that's the kind of case that we're going to look out for right now. 85 00:05:48,950 --> 00:05:53,930 And then I would switch over my action type I would have a case inside of your of it stream because 86 00:05:54,010 --> 00:05:59,320 it's the only case I want to show you very quickly I'm going to put the default on here just to be complete. 87 00:05:59,540 --> 00:06:06,710 So then inside of here if we fell into the edit stream case chances are our action object right here 88 00:06:06,710 --> 00:06:12,560 would have a payload of the newly updated stream that just came over from our API so we would then need 89 00:06:12,560 --> 00:06:18,500 to look through our state array right here find the old stream with the same ID remove it and replace 90 00:06:18,500 --> 00:06:21,550 it with the new stream and see that action object. 91 00:06:21,560 --> 00:06:24,560 So to do so we would end up with something it looks like this. 92 00:06:24,560 --> 00:06:26,960 I would return States on map. 93 00:06:27,260 --> 00:06:32,420 I would iterate over every string that I have inside of my state array and then I would say something 94 00:06:32,420 --> 00:06:41,480 like if the old stream ID is equal to action payload ID search number x not Paillard right here. 95 00:06:41,510 --> 00:06:45,090 That is the new stream that just came back from our API. 96 00:06:45,590 --> 00:06:50,990 So if the stream that I am iterating over has an ID equal to the stream that was just updated I want 97 00:06:50,990 --> 00:06:54,220 to return the new stream and not the old one. 98 00:06:54,290 --> 00:07:02,120 So I would put in return action payload and then I would also have to handle the else case here. 99 00:07:02,260 --> 00:07:07,510 So if it was not the stream I was looking for I would just return the stream itself. 100 00:07:08,070 --> 00:07:12,770 OK so that is a producer right there that is going to use an array based approach. 101 00:07:13,120 --> 00:07:17,860 And this is how much code we have to write just to find the appropriate record inside of that array 102 00:07:18,100 --> 00:07:19,120 and then replace it. 103 00:07:19,120 --> 00:07:21,670 So this is handling the audit stream case. 104 00:07:21,910 --> 00:07:23,270 So lets take a quick pause right here. 105 00:07:23,290 --> 00:07:27,760 When we come back the next video I'm going to show you the same example but we're going to use an object 106 00:07:27,760 --> 00:07:29,060 based approach instead. 107 00:07:29,220 --> 00:07:35,440 And you're going to very quickly see that it requires way way way less code to update records inside 108 00:07:35,470 --> 00:07:38,170 an object as opposed to this array approach. 109 00:07:38,170 --> 00:07:39,420 So let's take a quick pause right here. 110 00:07:39,430 --> 00:07:42,330 When we come back the next video I'll show you that quick example.