In this video we're going to move on to this last big rule around reducers.
This last one says must not mutate it's input states argument.
So just so you know the first argument that producers called with back on the song's application we
had called it the selected song or something like that.
But usually by convention we always refer to that first argument as state because that's what it really
is it is the piece of state that this reducer is managing from the last time that the producer ran.
So this rule right here says Do not mutate that first argument inside of your producer.
This rule is extremely misleading and possibly even a little bit wrong.
So in this video I want to first clarify exactly what it means to mutate something in the context of
the JavaScript language.
Well then take a brief pause.
We'll come back the next video and it will really start to examine what this rule means.
OK so what does mutate mean in the context of javascript.
I'm going to flip back over my application.
Notice I've got my Consul here.
I see a ton of air messaging that's totally fine on my console.
I'm going to click that little clear symbol right there and we're going to write out a little bit of
code to understand what mutations are inside of javascript.
I'm going to first begin by declaring a new array that I'm going to call colors and I'm going to put
in two strings into that thing red and green.
Now I can modify this array right here very easily by using a collection of different methods and different
pieces of syntax inside a javascript or example I could add in a new element to the end of the array
by calling colors push and then putting in a new string like so if I now print out that array colors
I'll see that it now has a new element inside of it.
Now this operation right here when we pushed a new element into the colors array is referred to as a
mutation.
We change the contents of the colors array.
Anytime that we change the contents of an array it is referred to as a mutation.
So I can take the form of adding an element of removing an element or by changing an element inside
there.
So let's take a look at another couple of ways that we could easily mutate an array.
I could say something like colorist dot pop and that will remove the last element inside there.
So now if I print out colors again I see that it's back to only having two elements.
That is a another type of mutation.
Now finally I could use my array accessor notation and select some particular element inside there and
say that I want to update that index with some new value like let's say think like so.
And now if I print out colors I see that the first element inside there have changed so that that is
three examples of mutating an array.
We have added a new element in we've removed an element and we have changed an element right here.
I just can see mutating an array is very very easy to do.
Chances are when you first learn Javascript these were some of the very first methods that you learnt
around arrays.
Now it's also take a look at how we can mutate a javascript object as well.
So I get to clear my console right here and then at the top I'm going to define a new object they'll
call profile and I'll say that this is an object that has a name property with the name of Alex.
Now just in a way that I can mutate an array.
I can also mutate an object very very easily as well.
A mutation on an object is anytime that we update the value of a property anytime that we add a key
value pair or anytime that we remove a key value pair.
So for example on an object I could say profile name equals Sam.
I have now mutated that object because I have changed a value inside of it by saying something like
profile.
I'll see that my new name is Sam.
I can also use say profile.
Age equals 30.
That is another mutation I have added a new key value pair to that object.
And so if I print out profile I can now see that the contents of the object had changed.
All rights that's mutations of a race and javascript objects in both cases it is extremely easy to mutate
values inside of javascript using the very basic syntax that you probably first learned when you started
learning javascript.
Now I want you to keep in mind right now that we are saying that we must not mutate that input argument
state.
So essentially that rule is saying we do not want to say anything.
Inside ever do sir we're can replace this code inside of here.
We do not want to do anything inside of your like state at zero equals Sam we do not want to do anything
like state push or semi-state pop.
We don't want to do anything like states or push and if we're working with an object we should not ever
do anything like state name equals Sam or state DOT.
Age equals 30.
In other words we are never going to write out state.
And then an equal sign to the right hand side like that we're never going to do that.
These are all bad things to do.
Oh they're bad.
All right.
Now as a quick side topic I want to mention it's mutation of strings and numbers inside a javascript.
It's going to flip back over here really quickly.
And I'm going to define a new variable here.
I'll say conc name is equal to Sam.
Now we can access individual characters inside of that name variable.
By using that familiar array accessor notation.
So I can say name at 0 and then print that out and I'll see that it is the first letter from that string
in this case capital S..
But if I try to change that value by saying name at zero equals capital X that code is going to run
successfully.
You'll see that there is no error message there.
There appears to be no problem whatsoever.
But if I then print out the name variable it is actually unchanged is still the original string.
Sam So inside of javascript strings and numbers are immutable values we can not change them in the same
way that we can easily change a array or an object.
And so if you have a producer that is always returning a number or a string you don't need to worry
about this mutation rule.
You only have to worry about these nutation things when you're working with an array or an object.
Now in practice our reducers most frequently are returning either a array or an object.
So this idea around mutation does come up pretty darn frequently.
OK so now that we understand what mutation means like in this rule right here.
Let's take a quick break.
When we come back in the next section we're going to really dive into this rule and understand exactly
what it's really trying to say because what you see here is not something that you take quite at face
value.
All right so quick pause and I'll see you in just a minute.