Unless video we put together an array based approach for our Stream reducer or handling specifically
at it stream case.
The reason I wrote out the sample code right here was just to show you that to handle replacing a record
inside of an array we have to write out a pretty decent amount of logic.
So we're now going to take a look at a object based approach instead and with this object based approach
we're going to have dramatically less code to write out and there's going to be a couple of other very
big benefits as well.
Now I want to remind you again that the code I'm writing inside this file is all temporary.
I'm going to delete this code in just a little bit.
I just want you to see the code for yourself on the screen.
All right so I got to go down to the bottom the file and I'll write out an object based approach.
So down here I will again create a stream reducer this will have a default state argument but this time
it is going to be an object as opposed to an array.
Then inside of your I will switch over my action type allowed on my default case and I'll also add on
the case of edit stream as well.
So once again I want to imagine how easily we can update a stream when we are using an object.
So to do so I would probably write out something that looks like this.
Let me show you exactly what I would probably do.
I would probably say something like new state is going to be a object.
I'm going to take all the key value pairs out of states and spread them in there with the dot dot dot
syntax.
So all this line right here is doing is creating a brand new object that has all the same key value
pairs as the state object right here.
Now the reason that I have this line of code right here is just to return a new object from my reducer
remember a while ago we took a look at the source code of redux and we saw that if we do not return
a brand new object redux is going to assume that we did not update anything from a producer.
So this line of code right here is just to update that object or just to create a new object.
So now that we have created the new object we want to somehow update the appropriate key value pair
inside of it.
So now in this approach we're going to have the IDs or I mean the keys be the idea of the stream and
then the value will be the stream itself.
So our ID is on that action object and the actual stream itself is on the action object as well.
So I could write out something like new state and I will use the property accessor notation here to
reference action payload.
ID as a reminder action that payload is the stream and the stream object contains the ID of the stream
as it was assigned up by our API.
So this is going to access our state object specifically at some given ID.
And we're going to set that equal to our new stream like so.
And then finally I can return new state OK.
So that's what it would look like with an object based approach.
Now when you look at this it still doesn't look that great.
We still have three lines of code right here just to create a new object assign a property to it overwriting
any existing property there is and then return it.
So at present it's not really a great improvement over our edit stream up here.
We still have some complicated syntax inside there but it turns out that there's a little bit of yes
47 20:15 syntax that we can use to significantly reduce the amount of code that we have to write right
here.
So I'm going to comment that out I'm going to show you an alternate approach.
This alternate approach is going to do the exact same thing that you see right here but it's going to
do it all in a single line of code.
So I'm going to write out return a new object.
Dot dot dot state.
And then here's where it gets crazy.
I'm going to put in square brackets action.
Payload dot ID I'll close off the square bracket or then put in a colon and then I will assign action
not payload like so.
All right so that's the crazy as 20:15 syntax.
So the code that you see right here is identical to what you see right here.
The syntax you see right here with the square brackets.
This is not creating an array even though it looks like an array.
It is not an array of being created.
This is what is referred to as key.
Interpellation.
So this essentially means we don't know exactly what key we want to add to the object.
We know that the action not payload id property is the key that we want to add but we want to somehow
add it in that key.
Like when this code runs we don't know what the key is ahead of time.
So in other words I can't write out something here like five.
I can't hard code the key because I don't know what the ID of the stream is going to be.
So by using the syntax we are saying look at the action of payload id property look at that idea whatever
the ideas whatever the number or string or value is take that and create a new key using it inside of
this overall object and to that key a sign action not payload.
Like I said this approach right here and this approach right here.
Totally identical.
But the second approach is far more concise.
So now I could delete that commented out stuff and I'm left with just what you see right here.
And so I think that at this point you would agree with me that this code is far more simple and straightforward
than the array based approach appear even though it has that crazy new syntax.
You still are going to eventually understand what is going here.
What is going on here far more easily than if you had to read out that entire map statement in the array
based approach up your.
OK.
Now as one last quick thing just to show you very quickly and make sure that the syntax is very clear.
I want to flip on over to my chrome console and write out a quick example to show you exactly how the
syntax works.
So if you already understand the syntax puzzle that you're right here.
Otherwise stick around.
And we're going to go through a very quick example.
OK.
So to help you understand that syntax I'm going to flip back over to my application and open up my console
and then inside if you're going to create a new object that I'm going to call animal sounds.
So this is going to be an object that has some key value pairs inside of it of the different sounds
that animals make.
So for example a cat goes meow and a dog goes bark.
So going to create that object and then we'll imagine that at some point in time in the future we want
to add in a new key value pair but the keys and the values that we want to add in are already assigned
to some array or some means to some variables.
So let's say that we want to add in a new animal of lion and the sound that it makes is roar.
So now I want to use the animal and sound variables to add in a new key value pair to animal sounds.
So to do so I could write out Crilley brace dot dot dot animal sounds all then do the square bracket
and put in animal clothes off the square bracket.
I'll put in a colon and then sound like so.
So now this is going to say take whatever string animal references and added as a new key to this object.
And for the value use the sound variable.
Now I can run this and I'll see that I get cat meow dog bark lion roar.
All right so that's it.
Now again the syntax here I can't say it enough.
We are not creating an array.
This is not an array.
This is string interpellation or something.
The key interpellation syntax not string interpolation string interpellation different thing.
All right so now we have a better idea of what's going on here we'll take a quick break right here and
when we continue in the next video we're going to start putting together our real stream reducer.