In the last section we spoke about why we are not supposed to mutate that state argument.
Now inevitably at some point in time you're going to be working on a reducer that is returning an array
or an object and you're going to want to change some element inside that array or some property on the
object.
So in this video we're going to take a look at some very common syntax that you're going to see inside
of reducers in order to work with erase in objects.
But still making sure that we are not mutating that state argument.
OK.
Here we go.
So in this diagram we have a couple of different operations so we can do on an array and a couple of
different operations that we can do on an object.
So removing something from an array adding something or replacing an element in array next to each of
those.
I have an example of the bad way to do an update to an array or an object.
So everything inside of yellow is bad.
And that is all code that we are not going to want to write inside very douceur.
Now just be really clear we do not want to write code like this that is going to operate on our state
argument.
If we have some other object in software array inside of our reducer that is not that first state argument
no problem we can mutate it as we please.
All this stuff about bad ways to update arrays and objects is only relevant to that state object that
argument right there OK.
So on the right hand side you'll see the good way in which we will remove an element from an array or
add an element or replace an element and same thing with objects as well.
Now I'm not going to read through all these.
I'm sure you can read the diagram.
I would encourage you to maybe take a screen shot at this because you're probably going to want to do
one of these operations at some point in time in the future now.
Nonetheless we are going to flip back over to our javascript console inside the browser and we're going
to try doing just a couple of these operations really quickly so that you understand the general idea
and the syntax.
All right so I can flip back over to my application with the console open.
We're going to write a little bit of code inside of here to get a better idea of how to somehow manipulate
arrays without mutating them inside of our reducers.
So to get started I'm going to first refreshed this page and then I'm going to clear out my console
and I'm going to redefine that array called colors and will say that this has a string red and green
like so.
So now as the first thing I want to show you is how we can add in an element to an array.
So we do not want to do something like color stop push that is bad.
We don't want to do that.
Instead we can create a new array by putting down a square bracket and then say dot dot dot colors and
then add in some new color like blue and you'll see that we get Red Green.
And now we have the added element inside there of blue.
So the syntax we see right here is a little bit of yes 20:15 syntax.
This is going to take all of the elements out of the colors array and add them into this new array that
we've created right here when we put down the square brackets that is creating a new array in memory
and so we are not going to be modifying or making any change to the original array and we are creating
a brand new one.
So redux is going to notice that we have now returned some entirely new value from our reducer.
We can very easily test that by rewriting that code and then saying equals equals equals.
Like so and that's going to return false because again not the same array in memory.
Now when we use this dot dot dot syntax we can very easily add in multiple elements at the same time.
So I could put on another string and another string like say pink.
Likewise I could also instead of concatenating or adding in new elements to the end of the array I could
say my new color as the first element and then say dot dot dot colors so I could do something like purple
and then do the DOT DOT DOT colors and that's going to make sure that we create a new array with the
first element of purple and then all the other colors.
All right let's try another quick example here.
Let's take a look at say removing an element from an array.
So with removing an element we can use the builtin or filter function that is included on array javascript
arrays excuse me lost my tongue there so we can make use of the built in filter function.
So let's take a quick example or a quick look at that we could say something like colors so we still
have red and green.
And then if I wanted to remove green I would say colors start filter then we're going to pass in a function
that is going to be called for every element inside that array.
I can then either return true or false inside of your to either include or remove each given element.
So I could say is color equal equal equal.
GREEN Oh sorry we said that we had wanted to remove green so I would instead say not equal to green.
Now anytime that we return false from the inner function a return value of false means that this element
is not going to be included inside of some new output array.
And so since color not equal to green I would end up with red Okay now one thing to keep in mind with
that filter function is that this is returning a brand new array.
We still have the UN mutated colors array in memory.
So once again if we do that comparison equals equals equals colors you would get false which is what
we want.
We always want to be returning brand new erase brand new objects.
All right let's take a quick look at how we would update properties inside of an object as well.
So let's say that we again have Konst profile and this person has a name of Sam like so and so at some
point in time we're probably going to want to update that name property to do so I can create a brand
new object with the curly braces and then dot dot dot profile.
So that's going to take all of the key value pairs out of the profile object and add it into this new
one.
Now I can list off some new key value pairs over here.
Any additional key value pairs that I add in will over right or replace the key value pairs that have
been added from the profile object.
So for example I could say name of Alex and now the output object.
This is a brand new object and it's going to have a name of Alex as opposed to the original name of
Sam.
Now I can do the same thing to add in new properties as well.
So it could do curly braces dot dot dot profile and we can say age of 30 that's going to take the name
of Sam out of the original profile object.
It's going to take that key value pair out into the new object.
And then also add in age of 30 we'll see Sam age 30.
Now the same order of operations that you just saw a moment ago with array's applies to objects as well.
So if I make a new object and say name of alexx and then say dot dot dot profile the name property inside
of profile is now going to overwrite the one inside of Sam.
He asked me the name I added right here.
So the name of Sam inside of profile is going to overwrite the name of Alex.
So all these additions into this object are going to be evaluated from left to right.
So if I run this I'll see that I have the name Sam.
I did not overwrite it with Alex because I added in name of Alex first and then I overwrote that with
the original name of Sam.
Now if you ever want to remove a property from an object usually in traditional javascript we could
possibly say delete state's name.
That's actual valid javascript syntax right there just to give you a quick example we could say delete
profile not name.
And now if I reference profile you see it the object is now empty.
So that is a mutation to our object.
Again we do not want to do that that is bad.
So I'm going to add profile that name back in.
Again this is a mutation we don't want to do that that is bad.
And I can see that again I've got a name of Alex inside that object.
Look at some how to actually remove a property from this thing.
We can either can we use a kind of Genki way that I don't really recommend right here where we would
essentially overwrite a property with a value of undefined.
So an example that would be like dot dot dot profil with name undefined.
Now I notice that when we do that it does kind of remove that property by setting the keys value equal
to undefined.
But the key value pair still exists inside of you.
So it's not really a true removal of that property.
A much easier way to do this would be to use the load ash library.
So this is a reference to the load ash library that's the underscore right there.
Loadout is a very popular javascript library for working with objects and arrays so to give you a very
quick example we could go over to the load ask documentation.
You don't have to navigate over here I'm going to give you a very quick example.
So this is the load documentation when I open up the console at the load ash page.
They have very helpfully assigned the load library in the console to the value of underscore.
And so you can only write the code I'm about to write on the load documentation page.
So if I created a profile over here and said name of Sam I could then Paul underscore omit house in
my profile and say that I want to remove the property Sam from that profile you'll see that now I get
back an object that does not have name inside of it but I can still reference the original profile and
I see that the original one it still has that key value pair and so omit is not going to mutate that
object.
It's going to create a new object without the name property.
All right.
So like I said you're going to be seeing code like this on the right hand side.
Extremely frequently inside of reducers that you write all the statements you see over here.
You are going to write inside of a reducer just nonstop again and again and again every time that you
are working with an array or an object and you want to somehow modify what is inside it to give an array
or object.
All right.
Now we've got a better idea of what's going on here.
Let's take a quick pause.
When we come back the next section we're going to finally finish off our post reducer.
Now that we've got a better idea of how these reducers really behave.
So quick break I'll see you in just a minute.