1 00:00:01,120 --> 00:00:05,450 In the last video we installed load ASH into our project I'm not going to flip back over to my terminal 2 00:00:05,450 --> 00:00:11,990 and start up my development server with NPM start again making sure that I'm inside of my client directory. 3 00:00:11,990 --> 00:00:12,560 All right. 4 00:00:12,570 --> 00:00:16,980 Now once that starts back up we're going to recall that we are now trying to make sure that we can take 5 00:00:17,010 --> 00:00:22,360 an array of streams from our API and merge them all into our state object in one go. 6 00:00:22,800 --> 00:00:25,870 So doing this is going to be just a little bit challenging. 7 00:00:25,890 --> 00:00:30,660 If we had a array for our state object and the producer it would be really straightforward to just kind 8 00:00:30,660 --> 00:00:32,260 of concat the two arrays together. 9 00:00:32,370 --> 00:00:35,560 But since we have an object we have to figure out a clever solution. 10 00:00:35,580 --> 00:00:37,890 So here's what we're going to do. 11 00:00:37,890 --> 00:00:39,930 All right so this diagram is a little bit confusing. 12 00:00:40,080 --> 00:00:45,900 On the left hand side this is an array meant to represent the response so we get back from our API when 13 00:00:45,900 --> 00:00:47,680 we get a list of streams. 14 00:00:47,850 --> 00:00:53,670 So when we get a list of strings from the API they come back in an array and each stream has an ID title 15 00:00:53,730 --> 00:00:55,410 and description property. 16 00:00:55,410 --> 00:01:00,740 Now in order to get these things merged in to our object we're going to use a function from loadout 17 00:01:00,780 --> 00:01:02,940 called map keys. 18 00:01:02,940 --> 00:01:10,080 Map keys is an odd as a function that's going to take an array and then return an object that keys of 19 00:01:10,080 --> 00:01:15,400 this new object are going to be taken from each individual record inside of the array. 20 00:01:15,630 --> 00:01:17,490 So we can call map keys. 21 00:01:17,640 --> 00:01:20,550 We can pass in the list of streams that we got from the API. 22 00:01:20,670 --> 00:01:27,420 And as the second argument we'll put in a string of ID the string of ID right there tells lot ash that 23 00:01:27,420 --> 00:01:34,020 for every one of these objects inside the original array use a key taken from the id property of each 24 00:01:34,020 --> 00:01:34,820 one. 25 00:01:34,830 --> 00:01:36,420 Now I know that sounds really confusing. 26 00:01:36,420 --> 00:01:42,360 Essentially all we're doing here is saying OK create a new object they see right here look at object 27 00:01:42,600 --> 00:01:45,150 number one inside the original array over here. 28 00:01:45,360 --> 00:01:48,100 Look at the id property of that object. 29 00:01:48,150 --> 00:01:52,630 So look at the ID right here whatever that value is in this case 12. 30 00:01:52,650 --> 00:01:55,980 Use it as the key for this entire object. 31 00:01:55,980 --> 00:01:59,630 When it gets added in to the new object over here. 32 00:01:59,670 --> 00:02:05,550 So essentially we create a new key of twelf and then we assign the original object to that key and then 33 00:02:05,550 --> 00:02:09,660 we repeat the process for all the other elements inside of here. 34 00:02:09,660 --> 00:02:13,590 Now I want to give you a very quick code example of this so that you can understand how this works in 35 00:02:13,590 --> 00:02:15,360 isolation. 36 00:02:15,450 --> 00:02:22,100 So I pull open a little playgrounds Ed. here very quickly if you want to follow along you can open it 37 00:02:22,100 --> 00:02:22,900 up in your browser. 38 00:02:22,910 --> 00:02:25,000 That's the address right there. 39 00:02:25,010 --> 00:02:31,050 So then inside of your let's make how about I don't know but an array of color objects. 40 00:02:33,100 --> 00:02:38,560 And I'll say that this is going to be an array that has objects and each object will have maybe a few 41 00:02:40,250 --> 00:02:44,670 I'll say the first one has a hue of green. 42 00:02:44,740 --> 00:02:47,430 The second one has a hue of yellow. 43 00:02:47,530 --> 00:02:51,810 By the way the word Q In English is kind of like a reference to color more or less. 44 00:02:51,820 --> 00:02:56,320 I don't know someone who who's an expert in colors can tell me exactly what he means and will add in 45 00:02:56,320 --> 00:02:57,340 one of blue as well. 46 00:02:57,960 --> 00:03:05,220 So then if we did a underscore map keys we can pass in the colors object and then as a second argument 47 00:03:05,520 --> 00:03:10,170 I'll pass in the string of what object or receive me what property I want to use as the keys from the 48 00:03:10,200 --> 00:03:11,350 original colors array. 49 00:03:11,490 --> 00:03:15,660 So in this case I'll put in Q Like so. 50 00:03:15,780 --> 00:03:18,560 So you can see this is the object that gets that gets generated. 51 00:03:18,560 --> 00:03:20,340 All we did was create an object. 52 00:03:20,390 --> 00:03:25,570 We took each of these objects added them to that object and the key for each one is whatever the hue 53 00:03:25,580 --> 00:03:26,600 property was. 54 00:03:26,600 --> 00:03:33,380 So I see Aquia of green then the value is an object with the hue of green CAQ of milky of yellow with 55 00:03:33,380 --> 00:03:38,030 a hue of yellow and aiki of blue with a hue of blue as well. 56 00:03:38,030 --> 00:03:40,980 So we could imagine the exact same thing but with ID. 57 00:03:41,030 --> 00:03:50,090 If I put an ID idea Id And then I put in like say three five and seven and then update the argument 58 00:03:50,090 --> 00:03:51,560 right here to ID instead. 59 00:03:51,710 --> 00:03:58,290 I now see that I get three points at the object with an idea of 3 5 ID 5 7 ID 7. 60 00:03:58,290 --> 00:04:00,170 So that's what's going on with map keys. 61 00:04:00,380 --> 00:04:04,910 So that's how we're going to take the array of streams we get back from our API and turn them into an 62 00:04:04,910 --> 00:04:05,490 object. 63 00:04:05,570 --> 00:04:09,830 And we're going to take this subject right here that gets generated from map keys and add them into 64 00:04:09,830 --> 00:04:11,100 our state object. 65 00:04:11,340 --> 00:04:11,560 OK. 66 00:04:11,570 --> 00:04:15,060 So let's flip back over to our producer and we'll put this code together. 67 00:04:15,090 --> 00:04:23,900 So back inside my producer and out in a new case at the top of fetch streams now I can't say it enough. 68 00:04:23,940 --> 00:04:25,750 Please make sure you get the Ehsaan there. 69 00:04:25,980 --> 00:04:30,870 I know at least some percentage of people watching this video some number of people are going to put 70 00:04:30,930 --> 00:04:36,080 a s on this one down here and no s up here please make sure you've got streams and then stream. 71 00:04:36,090 --> 00:04:38,070 Singular. 72 00:04:38,100 --> 00:04:40,810 All right so then we're going to put in a return statement. 73 00:04:41,890 --> 00:04:43,410 Now I'll do my underscore actually. 74 00:04:43,440 --> 00:04:45,870 Let's do it the right way we'll put in our new object. 75 00:04:46,050 --> 00:04:47,460 Dot dot dot state. 76 00:04:47,490 --> 00:04:52,440 So we're going to create a new object take a key value pairs out of our current state object and then 77 00:04:52,440 --> 00:05:00,190 we will do a dot dot dot underscore dot map keys action dot payload. 78 00:05:00,410 --> 00:05:05,120 Id like so. 79 00:05:05,170 --> 00:05:06,870 All right so this one looks a little bit different. 80 00:05:06,870 --> 00:05:07,350 Right. 81 00:05:07,540 --> 00:05:09,230 So again we are creating a new object. 82 00:05:09,250 --> 00:05:13,660 We're taking all the current records we have inside of our state object and adding the men were then 83 00:05:13,660 --> 00:05:15,730 calling map keys right here. 84 00:05:15,730 --> 00:05:20,290 We're going to take the list of streams that we just got back from our API and we're going to create 85 00:05:20,320 --> 00:05:26,200 a object out of it using map keys and the keys inside that object are going to be the IDs of the individual 86 00:05:26,200 --> 00:05:27,460 streams themselves. 87 00:05:27,820 --> 00:05:34,060 Now map keys returns a big object and we want to take all the key value pairs from that object and add 88 00:05:34,060 --> 00:05:36,710 them into the new object that gets created. 89 00:05:36,730 --> 00:05:39,300 So that's why I put the dot dot dot up here. 90 00:05:39,610 --> 00:05:44,950 So take whatever big object comes from that keys take all the key value pairs out of it and add it into 91 00:05:44,950 --> 00:05:47,450 the new big overall object. 92 00:05:48,780 --> 00:05:49,490 That's pretty much it. 93 00:05:49,490 --> 00:05:51,590 That's all we have to do for our reducer. 94 00:05:51,670 --> 00:05:57,020 So now the last thing we're going to do is save the file and then going to flip back over to my reducers 95 00:05:57,080 --> 00:06:01,130 index file and I'm going to import that reducer at the top 96 00:06:06,680 --> 00:06:10,180 and then I'll add it as a new property on my combined reducers call. 97 00:06:10,180 --> 00:06:17,570 So I'll say streams is stream reduce or now one thing I want to mention here very quickly you'll notice 98 00:06:17,570 --> 00:06:18,260 I put. 99 00:06:18,320 --> 00:06:18,950 Stream. 100 00:06:19,070 --> 00:06:24,010 Cingular as opposed to like streams plural like so you can do it either way. 101 00:06:24,050 --> 00:06:26,900 You can call it stream reducer or stream producer. 102 00:06:26,930 --> 00:06:29,570 You can change the file name to be to suit as well. 103 00:06:29,570 --> 00:06:32,920 It's totally up to you if you want to be singular or plural. 104 00:06:32,940 --> 00:06:36,710 There is absolutely a great number of reasons to do it. 105 00:06:36,710 --> 00:06:38,530 Either way it's really personal preference. 106 00:06:38,530 --> 00:06:44,180 I would say all right now we'll save this and I'm going to flip back over to my application and I'm 107 00:06:44,180 --> 00:06:47,400 going to essentially just make sure that I do not have any errors. 108 00:06:47,510 --> 00:06:51,980 So if you see an error message at this point please read the error message the error message will tell 109 00:06:51,980 --> 00:06:53,900 you exactly what you did wrong. 110 00:06:54,080 --> 00:06:55,140 Sorry the error message. 111 00:06:55,160 --> 00:06:57,300 And do any fix that it suggests. 112 00:06:57,470 --> 00:07:02,510 And then once you get everything fixed up you should still see our application like so now I can also 113 00:07:02,510 --> 00:07:06,310 open up my redux dev tools over here. 114 00:07:06,410 --> 00:07:10,090 I don't actually see my new key. 115 00:07:10,110 --> 00:07:12,850 You know what I going to make sure I select state right there. 116 00:07:12,850 --> 00:07:17,300 That's why I had diff selected That's why I did not see the appropriate property inside there. 117 00:07:17,350 --> 00:07:22,490 So if I select state I should now see off form and streams and streams should be an object which it 118 00:07:22,480 --> 00:07:23,470 definitely has. 119 00:07:23,830 --> 00:07:25,030 OK this looks great. 120 00:07:25,030 --> 00:07:28,900 We'll take a quick pause right here when we come back the next video we're going to make sure that we 121 00:07:28,900 --> 00:07:34,030 can fetch our list of streams whenever the stream list component is rendered on the screen and once 122 00:07:34,030 --> 00:07:38,470 we get that in we'll then be able to verify that in fact we are successfully fetching streams from our 123 00:07:38,470 --> 00:07:44,060 API and managing them with these streams reducer so quick and I'll see you in just a minute.