1
00:00:00,810 --> 00:00:04,120
In this video we're going to move on to this last big rule around reducers.

2
00:00:04,120 --> 00:00:08,760
This last one says must not mutate it's input states argument.

3
00:00:08,880 --> 00:00:14,040
So just so you know the first argument that producers called with back on the song's application we

4
00:00:14,040 --> 00:00:17,290
had called it the selected song or something like that.

5
00:00:17,400 --> 00:00:22,380
But usually by convention we always refer to that first argument as state because that's what it really

6
00:00:22,380 --> 00:00:28,800
is it is the piece of state that this reducer is managing from the last time that the producer ran.

7
00:00:28,820 --> 00:00:34,040
So this rule right here says Do not mutate that first argument inside of your producer.

8
00:00:34,040 --> 00:00:39,330
This rule is extremely misleading and possibly even a little bit wrong.

9
00:00:39,500 --> 00:00:44,840
So in this video I want to first clarify exactly what it means to mutate something in the context of

10
00:00:44,840 --> 00:00:46,110
the JavaScript language.

11
00:00:46,250 --> 00:00:47,690
Well then take a brief pause.

12
00:00:47,720 --> 00:00:52,290
We'll come back the next video and it will really start to examine what this rule means.

13
00:00:52,550 --> 00:00:55,670
OK so what does mutate mean in the context of javascript.

14
00:00:55,710 --> 00:00:58,020
I'm going to flip back over my application.

15
00:00:58,090 --> 00:00:59,720
Notice I've got my Consul here.

16
00:00:59,720 --> 00:01:03,460
I see a ton of air messaging that's totally fine on my console.

17
00:01:03,470 --> 00:01:07,250
I'm going to click that little clear symbol right there and we're going to write out a little bit of

18
00:01:07,250 --> 00:01:11,300
code to understand what mutations are inside of javascript.

19
00:01:11,300 --> 00:01:17,480
I'm going to first begin by declaring a new array that I'm going to call colors and I'm going to put

20
00:01:17,480 --> 00:01:20,810
in two strings into that thing red and green.

21
00:01:20,820 --> 00:01:27,630
Now I can modify this array right here very easily by using a collection of different methods and different

22
00:01:27,630 --> 00:01:34,080
pieces of syntax inside a javascript or example I could add in a new element to the end of the array

23
00:01:34,230 --> 00:01:40,980
by calling colors push and then putting in a new string like so if I now print out that array colors

24
00:01:41,280 --> 00:01:44,190
I'll see that it now has a new element inside of it.

25
00:01:44,190 --> 00:01:49,410
Now this operation right here when we pushed a new element into the colors array is referred to as a

26
00:01:49,410 --> 00:01:50,630
mutation.

27
00:01:50,700 --> 00:01:53,730
We change the contents of the colors array.

28
00:01:53,780 --> 00:01:57,810
Anytime that we change the contents of an array it is referred to as a mutation.

29
00:01:57,960 --> 00:02:04,170
So I can take the form of adding an element of removing an element or by changing an element inside

30
00:02:04,170 --> 00:02:05,010
there.

31
00:02:05,010 --> 00:02:08,960
So let's take a look at another couple of ways that we could easily mutate an array.

32
00:02:09,150 --> 00:02:15,060
I could say something like colorist dot pop and that will remove the last element inside there.

33
00:02:15,090 --> 00:02:19,540
So now if I print out colors again I see that it's back to only having two elements.

34
00:02:19,560 --> 00:02:21,570
That is a another type of mutation.

35
00:02:22,450 --> 00:02:28,990
Now finally I could use my array accessor notation and select some particular element inside there and

36
00:02:28,990 --> 00:02:34,440
say that I want to update that index with some new value like let's say think like so.

37
00:02:34,780 --> 00:02:41,030
And now if I print out colors I see that the first element inside there have changed so that that is

38
00:02:41,050 --> 00:02:44,110
three examples of mutating an array.

39
00:02:44,170 --> 00:02:50,620
We have added a new element in we've removed an element and we have changed an element right here.

40
00:02:50,620 --> 00:02:53,800
I just can see mutating an array is very very easy to do.

41
00:02:53,800 --> 00:02:58,420
Chances are when you first learn Javascript these were some of the very first methods that you learnt

42
00:02:58,450 --> 00:03:00,640
around arrays.

43
00:03:00,740 --> 00:03:05,460
Now it's also take a look at how we can mutate a javascript object as well.

44
00:03:05,510 --> 00:03:10,230
So I get to clear my console right here and then at the top I'm going to define a new object they'll

45
00:03:10,230 --> 00:03:17,850
call profile and I'll say that this is an object that has a name property with the name of Alex.

46
00:03:17,860 --> 00:03:20,460
Now just in a way that I can mutate an array.

47
00:03:20,470 --> 00:03:23,980
I can also mutate an object very very easily as well.

48
00:03:24,130 --> 00:03:30,550
A mutation on an object is anytime that we update the value of a property anytime that we add a key

49
00:03:30,550 --> 00:03:34,390
value pair or anytime that we remove a key value pair.

50
00:03:34,390 --> 00:03:39,640
So for example on an object I could say profile name equals Sam.

51
00:03:39,760 --> 00:03:45,550
I have now mutated that object because I have changed a value inside of it by saying something like

52
00:03:45,930 --> 00:03:46,700
profile.

53
00:03:46,720 --> 00:03:49,750
I'll see that my new name is Sam.

54
00:03:49,810 --> 00:03:51,570
I can also use say profile.

55
00:03:51,580 --> 00:03:53,070
Age equals 30.

56
00:03:53,230 --> 00:03:57,300
That is another mutation I have added a new key value pair to that object.

57
00:03:57,500 --> 00:04:02,070
And so if I print out profile I can now see that the contents of the object had changed.

58
00:04:02,850 --> 00:04:09,990
All rights that's mutations of a race and javascript objects in both cases it is extremely easy to mutate

59
00:04:09,990 --> 00:04:16,500
values inside of javascript using the very basic syntax that you probably first learned when you started

60
00:04:16,560 --> 00:04:18,700
learning javascript.

61
00:04:18,710 --> 00:04:23,850
Now I want you to keep in mind right now that we are saying that we must not mutate that input argument

62
00:04:23,850 --> 00:04:24,440
state.

63
00:04:24,440 --> 00:04:28,320
So essentially that rule is saying we do not want to say anything.

64
00:04:29,410 --> 00:04:32,360
Inside ever do sir we're can replace this code inside of here.

65
00:04:32,470 --> 00:04:39,310
We do not want to do anything inside of your like state at zero equals Sam we do not want to do anything

66
00:04:39,340 --> 00:04:42,840
like state push or semi-state pop.

67
00:04:42,970 --> 00:04:48,480
We don't want to do anything like states or push and if we're working with an object we should not ever

68
00:04:48,480 --> 00:04:52,700
do anything like state name equals Sam or state DOT.

69
00:04:52,740 --> 00:04:54,330
Age equals 30.

70
00:04:54,420 --> 00:04:57,490
In other words we are never going to write out state.

71
00:04:57,570 --> 00:05:01,770
And then an equal sign to the right hand side like that we're never going to do that.

72
00:05:01,770 --> 00:05:03,950
These are all bad things to do.

73
00:05:08,620 --> 00:05:09,700
Oh they're bad.

74
00:05:10,160 --> 00:05:10,420
All right.

75
00:05:10,430 --> 00:05:16,050
Now as a quick side topic I want to mention it's mutation of strings and numbers inside a javascript.

76
00:05:16,150 --> 00:05:18,170
It's going to flip back over here really quickly.

77
00:05:19,080 --> 00:05:21,300
And I'm going to define a new variable here.

78
00:05:21,450 --> 00:05:24,290
I'll say conc name is equal to Sam.

79
00:05:24,330 --> 00:05:28,110
Now we can access individual characters inside of that name variable.

80
00:05:28,170 --> 00:05:30,990
By using that familiar array accessor notation.

81
00:05:30,990 --> 00:05:36,150
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

82
00:05:36,150 --> 00:05:38,190
in this case capital S..

83
00:05:38,610 --> 00:05:46,050
But if I try to change that value by saying name at zero equals capital X that code is going to run

84
00:05:46,050 --> 00:05:46,830
successfully.

85
00:05:46,860 --> 00:05:48,840
You'll see that there is no error message there.

86
00:05:48,870 --> 00:05:51,050
There appears to be no problem whatsoever.

87
00:05:51,150 --> 00:05:56,370
But if I then print out the name variable it is actually unchanged is still the original string.

88
00:05:56,370 --> 00:06:04,660
Sam So inside of javascript strings and numbers are immutable values we can not change them in the same

89
00:06:04,660 --> 00:06:08,290
way that we can easily change a array or an object.

90
00:06:08,380 --> 00:06:13,450
And so if you have a producer that is always returning a number or a string you don't need to worry

91
00:06:13,450 --> 00:06:15,070
about this mutation rule.

92
00:06:15,070 --> 00:06:20,410
You only have to worry about these nutation things when you're working with an array or an object.

93
00:06:20,410 --> 00:06:25,960
Now in practice our reducers most frequently are returning either a array or an object.

94
00:06:25,960 --> 00:06:29,680
So this idea around mutation does come up pretty darn frequently.

95
00:06:30,140 --> 00:06:34,450
OK so now that we understand what mutation means like in this rule right here.

96
00:06:34,480 --> 00:06:35,620
Let's take a quick break.

97
00:06:35,630 --> 00:06:40,480
When we come back in the next section we're going to really dive into this rule and understand exactly

98
00:06:40,720 --> 00:06:46,630
what it's really trying to say because what you see here is not something that you take quite at face

99
00:06:46,630 --> 00:06:47,310
value.

100
00:06:47,590 --> 00:06:49,690
All right so quick pause and I'll see you in just a minute.