In the last video we installed load ASH into our project I'm not going to flip back over to my terminal
and start up my development server with NPM start again making sure that I'm inside of my client directory.
All right.
Now once that starts back up we're going to recall that we are now trying to make sure that we can take
an array of streams from our API and merge them all into our state object in one go.
So doing this is going to be just a little bit challenging.
If we had a array for our state object and the producer it would be really straightforward to just kind
of concat the two arrays together.
But since we have an object we have to figure out a clever solution.
So here's what we're going to do.
All right so this diagram is a little bit confusing.
On the left hand side this is an array meant to represent the response so we get back from our API when
we get a list of streams.
So when we get a list of strings from the API they come back in an array and each stream has an ID title
and description property.
Now in order to get these things merged in to our object we're going to use a function from loadout
called map keys.
Map keys is an odd as a function that's going to take an array and then return an object that keys of
this new object are going to be taken from each individual record inside of the array.
So we can call map keys.
We can pass in the list of streams that we got from the API.
And as the second argument we'll put in a string of ID the string of ID right there tells lot ash that
for every one of these objects inside the original array use a key taken from the id property of each
one.
Now I know that sounds really confusing.
Essentially all we're doing here is saying OK create a new object they see right here look at object
number one inside the original array over here.
Look at the id property of that object.
So look at the ID right here whatever that value is in this case 12.
Use it as the key for this entire object.
When it gets added in to the new object over here.
So essentially we create a new key of twelf and then we assign the original object to that key and then
we repeat the process for all the other elements inside of here.
Now I want to give you a very quick code example of this so that you can understand how this works in
isolation.
So I pull open a little playgrounds Ed. here very quickly if you want to follow along you can open it
up in your browser.
That's the address right there.
So then inside of your let's make how about I don't know but an array of color objects.
And I'll say that this is going to be an array that has objects and each object will have maybe a few
I'll say the first one has a hue of green.
The second one has a hue of yellow.
By the way the word Q In English is kind of like a reference to color more or less.
I don't know someone who who's an expert in colors can tell me exactly what he means and will add in
one of blue as well.
So then if we did a underscore map keys we can pass in the colors object and then as a second argument
I'll pass in the string of what object or receive me what property I want to use as the keys from the
original colors array.
So in this case I'll put in Q Like so.
So you can see this is the object that gets that gets generated.
All we did was create an object.
We took each of these objects added them to that object and the key for each one is whatever the hue
property was.
So I see Aquia of green then the value is an object with the hue of green CAQ of milky of yellow with
a hue of yellow and aiki of blue with a hue of blue as well.
So we could imagine the exact same thing but with ID.
If I put an ID idea Id And then I put in like say three five and seven and then update the argument
right here to ID instead.
I now see that I get three points at the object with an idea of 3 5 ID 5 7 ID 7.
So that's what's going on with map keys.
So that's how we're going to take the array of streams we get back from our API and turn them into an
object.
And we're going to take this subject right here that gets generated from map keys and add them into
our state object.
OK.
So let's flip back over to our producer and we'll put this code together.
So back inside my producer and out in a new case at the top of fetch streams now I can't say it enough.
Please make sure you get the Ehsaan there.
I know at least some percentage of people watching this video some number of people are going to put
a s on this one down here and no s up here please make sure you've got streams and then stream.
Singular.
All right so then we're going to put in a return statement.
Now I'll do my underscore actually.
Let's do it the right way we'll put in our new object.
Dot dot dot state.
So we're going to create a new object take a key value pairs out of our current state object and then
we will do a dot dot dot underscore dot map keys action dot payload.
Id like so.
All right so this one looks a little bit different.
Right.
So again we are creating a new object.
We're taking all the current records we have inside of our state object and adding the men were then
calling map keys right here.
We're going to take the list of streams that we just got back from our API and we're going to create
a object out of it using map keys and the keys inside that object are going to be the IDs of the individual
streams themselves.
Now map keys returns a big object and we want to take all the key value pairs from that object and add
them into the new object that gets created.
So that's why I put the dot dot dot up here.
So take whatever big object comes from that keys take all the key value pairs out of it and add it into
the new big overall object.
That's pretty much it.
That's all we have to do for our reducer.
So now the last thing we're going to do is save the file and then going to flip back over to my reducers
index file and I'm going to import that reducer at the top
and then I'll add it as a new property on my combined reducers call.
So I'll say streams is stream reduce or now one thing I want to mention here very quickly you'll notice
I put.
Stream.
Cingular as opposed to like streams plural like so you can do it either way.
You can call it stream reducer or stream producer.
You can change the file name to be to suit as well.
It's totally up to you if you want to be singular or plural.
There is absolutely a great number of reasons to do it.
Either way it's really personal preference.
I would say all right now we'll save this and I'm going to flip back over to my application and I'm
going to essentially just make sure that I do not have any errors.
So if you see an error message at this point please read the error message the error message will tell
you exactly what you did wrong.
Sorry the error message.
And do any fix that it suggests.
And then once you get everything fixed up you should still see our application like so now I can also
open up my redux dev tools over here.
I don't actually see my new key.
You know what I going to make sure I select state right there.
That's why I had diff selected That's why I did not see the appropriate property inside there.
So if I select state I should now see off form and streams and streams should be an object which it
definitely has.
OK this looks great.
We'll take a quick pause right here when we come back the next video we're going to make sure that we
can fetch our list of streams whenever the stream list component is rendered on the screen and once
we get that in we'll then be able to verify that in fact we are successfully fetching streams from our
API and managing them with these streams reducer so quick and I'll see you in just a minute.