1
00:00:00,700 --> 00:00:04,590
In the last section we spoke about why we are not supposed to mutate that state argument.

2
00:00:04,590 --> 00:00:10,080
Now inevitably at some point in time you're going to be working on a reducer that is returning an array

3
00:00:10,110 --> 00:00:16,020
or an object and you're going to want to change some element inside that array or some property on the

4
00:00:16,020 --> 00:00:16,860
object.

5
00:00:16,860 --> 00:00:21,180
So in this video we're going to take a look at some very common syntax that you're going to see inside

6
00:00:21,180 --> 00:00:24,170
of reducers in order to work with erase in objects.

7
00:00:24,210 --> 00:00:27,700
But still making sure that we are not mutating that state argument.

8
00:00:28,090 --> 00:00:28,390
OK.

9
00:00:28,410 --> 00:00:29,550
Here we go.

10
00:00:29,580 --> 00:00:35,040
So in this diagram we have a couple of different operations so we can do on an array and a couple of

11
00:00:35,040 --> 00:00:37,370
different operations that we can do on an object.

12
00:00:37,380 --> 00:00:42,390
So removing something from an array adding something or replacing an element in array next to each of

13
00:00:42,390 --> 00:00:42,720
those.

14
00:00:42,720 --> 00:00:47,420
I have an example of the bad way to do an update to an array or an object.

15
00:00:47,520 --> 00:00:49,440
So everything inside of yellow is bad.

16
00:00:49,470 --> 00:00:53,230
And that is all code that we are not going to want to write inside very douceur.

17
00:00:53,400 --> 00:00:59,070
Now just be really clear we do not want to write code like this that is going to operate on our state

18
00:00:59,160 --> 00:00:59,910
argument.

19
00:01:00,120 --> 00:01:06,280
If we have some other object in software array inside of our reducer that is not that first state argument

20
00:01:06,330 --> 00:01:08,690
no problem we can mutate it as we please.

21
00:01:08,730 --> 00:01:15,090
All this stuff about bad ways to update arrays and objects is only relevant to that state object that

22
00:01:15,090 --> 00:01:17,890
argument right there OK.

23
00:01:17,900 --> 00:01:22,580
So on the right hand side you'll see the good way in which we will remove an element from an array or

24
00:01:22,580 --> 00:01:26,510
add an element or replace an element and same thing with objects as well.

25
00:01:26,510 --> 00:01:27,890
Now I'm not going to read through all these.

26
00:01:27,890 --> 00:01:29,630
I'm sure you can read the diagram.

27
00:01:29,660 --> 00:01:33,800
I would encourage you to maybe take a screen shot at this because you're probably going to want to do

28
00:01:33,800 --> 00:01:37,080
one of these operations at some point in time in the future now.

29
00:01:37,100 --> 00:01:41,810
Nonetheless we are going to flip back over to our javascript console inside the browser and we're going

30
00:01:41,810 --> 00:01:46,410
to try doing just a couple of these operations really quickly so that you understand the general idea

31
00:01:46,450 --> 00:01:48,110
and the syntax.

32
00:01:48,110 --> 00:01:51,940
All right so I can flip back over to my application with the console open.

33
00:01:52,010 --> 00:01:56,870
We're going to write a little bit of code inside of here to get a better idea of how to somehow manipulate

34
00:01:56,900 --> 00:02:00,590
arrays without mutating them inside of our reducers.

35
00:02:00,590 --> 00:02:05,420
So to get started I'm going to first refreshed this page and then I'm going to clear out my console

36
00:02:05,870 --> 00:02:12,800
and I'm going to redefine that array called colors and will say that this has a string red and green

37
00:02:12,860 --> 00:02:13,770
like so.

38
00:02:14,000 --> 00:02:18,540
So now as the first thing I want to show you is how we can add in an element to an array.

39
00:02:18,590 --> 00:02:21,960
So we do not want to do something like color stop push that is bad.

40
00:02:21,980 --> 00:02:23,420
We don't want to do that.

41
00:02:23,480 --> 00:02:30,410
Instead we can create a new array by putting down a square bracket and then say dot dot dot colors and

42
00:02:30,410 --> 00:02:36,340
then add in some new color like blue and you'll see that we get Red Green.

43
00:02:36,340 --> 00:02:39,890
And now we have the added element inside there of blue.

44
00:02:39,910 --> 00:02:43,910
So the syntax we see right here is a little bit of yes 20:15 syntax.

45
00:02:43,960 --> 00:02:49,590
This is going to take all of the elements out of the colors array and add them into this new array that

46
00:02:49,650 --> 00:02:55,870
we've created right here when we put down the square brackets that is creating a new array in memory

47
00:02:56,440 --> 00:03:01,870
and so we are not going to be modifying or making any change to the original array and we are creating

48
00:03:01,870 --> 00:03:02,870
a brand new one.

49
00:03:02,890 --> 00:03:09,870
So redux is going to notice that we have now returned some entirely new value from our reducer.

50
00:03:09,950 --> 00:03:14,790
We can very easily test that by rewriting that code and then saying equals equals equals.

51
00:03:14,930 --> 00:03:21,050
Like so and that's going to return false because again not the same array in memory.

52
00:03:21,110 --> 00:03:26,430
Now when we use this dot dot dot syntax we can very easily add in multiple elements at the same time.

53
00:03:26,500 --> 00:03:30,760
So I could put on another string and another string like say pink.

54
00:03:30,860 --> 00:03:37,900
Likewise I could also instead of concatenating or adding in new elements to the end of the array I could

55
00:03:37,900 --> 00:03:43,740
say my new color as the first element and then say dot dot dot colors so I could do something like purple

56
00:03:44,410 --> 00:03:48,370
and then do the DOT DOT DOT colors and that's going to make sure that we create a new array with the

57
00:03:48,370 --> 00:03:52,360
first element of purple and then all the other colors.

58
00:03:52,370 --> 00:03:54,180
All right let's try another quick example here.

59
00:03:54,320 --> 00:03:57,920
Let's take a look at say removing an element from an array.

60
00:03:57,920 --> 00:04:05,700
So with removing an element we can use the builtin or filter function that is included on array javascript

61
00:04:05,700 --> 00:04:10,450
arrays excuse me lost my tongue there so we can make use of the built in filter function.

62
00:04:10,450 --> 00:04:14,460
So let's take a quick example or a quick look at that we could say something like colors so we still

63
00:04:14,460 --> 00:04:15,620
have red and green.

64
00:04:15,750 --> 00:04:21,970
And then if I wanted to remove green I would say colors start filter then we're going to pass in a function

65
00:04:21,970 --> 00:04:24,810
that is going to be called for every element inside that array.

66
00:04:25,120 --> 00:04:31,180
I can then either return true or false inside of your to either include or remove each given element.

67
00:04:31,180 --> 00:04:34,560
So I could say is color equal equal equal.

68
00:04:34,760 --> 00:04:41,840
GREEN Oh sorry we said that we had wanted to remove green so I would instead say not equal to green.

69
00:04:41,890 --> 00:04:46,920
Now anytime that we return false from the inner function a return value of false means that this element

70
00:04:46,920 --> 00:04:50,370
is not going to be included inside of some new output array.

71
00:04:50,790 --> 00:04:57,760
And so since color not equal to green I would end up with red Okay now one thing to keep in mind with

72
00:04:57,760 --> 00:05:01,440
that filter function is that this is returning a brand new array.

73
00:05:01,450 --> 00:05:04,980
We still have the UN mutated colors array in memory.

74
00:05:05,030 --> 00:05:10,840
So once again if we do that comparison equals equals equals colors you would get false which is what

75
00:05:10,840 --> 00:05:11,290
we want.

76
00:05:11,290 --> 00:05:16,630
We always want to be returning brand new erase brand new objects.

77
00:05:16,770 --> 00:05:21,450
All right let's take a quick look at how we would update properties inside of an object as well.

78
00:05:21,500 --> 00:05:30,240
So let's say that we again have Konst profile and this person has a name of Sam like so and so at some

79
00:05:30,240 --> 00:05:34,800
point in time we're probably going to want to update that name property to do so I can create a brand

80
00:05:34,800 --> 00:05:40,480
new object with the curly braces and then dot dot dot profile.

81
00:05:40,620 --> 00:05:45,570
So that's going to take all of the key value pairs out of the profile object and add it into this new

82
00:05:45,570 --> 00:05:46,410
one.

83
00:05:46,410 --> 00:05:49,250
Now I can list off some new key value pairs over here.

84
00:05:49,530 --> 00:05:54,780
Any additional key value pairs that I add in will over right or replace the key value pairs that have

85
00:05:54,780 --> 00:05:56,780
been added from the profile object.

86
00:05:57,030 --> 00:06:02,760
So for example I could say name of Alex and now the output object.

87
00:06:02,780 --> 00:06:07,490
This is a brand new object and it's going to have a name of Alex as opposed to the original name of

88
00:06:07,490 --> 00:06:08,910
Sam.

89
00:06:08,910 --> 00:06:11,950
Now I can do the same thing to add in new properties as well.

90
00:06:12,090 --> 00:06:18,900
So it could do curly braces dot dot dot profile and we can say age of 30 that's going to take the name

91
00:06:19,080 --> 00:06:21,740
of Sam out of the original profile object.

92
00:06:21,800 --> 00:06:25,010
It's going to take that key value pair out into the new object.

93
00:06:25,110 --> 00:06:29,700
And then also add in age of 30 we'll see Sam age 30.

94
00:06:29,760 --> 00:06:35,380
Now the same order of operations that you just saw a moment ago with array's applies to objects as well.

95
00:06:35,400 --> 00:06:46,260
So if I make a new object and say name of alexx and then say dot dot dot profile the name property inside

96
00:06:46,290 --> 00:06:49,990
of profile is now going to overwrite the one inside of Sam.

97
00:06:49,990 --> 00:06:52,440
He asked me the name I added right here.

98
00:06:52,560 --> 00:06:57,140
So the name of Sam inside of profile is going to overwrite the name of Alex.

99
00:06:57,150 --> 00:07:01,550
So all these additions into this object are going to be evaluated from left to right.

100
00:07:01,560 --> 00:07:03,780
So if I run this I'll see that I have the name Sam.

101
00:07:03,870 --> 00:07:09,570
I did not overwrite it with Alex because I added in name of Alex first and then I overwrote that with

102
00:07:09,570 --> 00:07:11,950
the original name of Sam.

103
00:07:11,950 --> 00:07:17,170
Now if you ever want to remove a property from an object usually in traditional javascript we could

104
00:07:17,170 --> 00:07:19,280
possibly say delete state's name.

105
00:07:19,390 --> 00:07:24,520
That's actual valid javascript syntax right there just to give you a quick example we could say delete

106
00:07:24,580 --> 00:07:27,550
profile not name.

107
00:07:27,650 --> 00:07:31,190
And now if I reference profile you see it the object is now empty.

108
00:07:31,190 --> 00:07:33,330
So that is a mutation to our object.

109
00:07:33,340 --> 00:07:35,620
Again we do not want to do that that is bad.

110
00:07:35,930 --> 00:07:38,810
So I'm going to add profile that name back in.

111
00:07:38,810 --> 00:07:41,490
Again this is a mutation we don't want to do that that is bad.

112
00:07:41,650 --> 00:07:45,680
And I can see that again I've got a name of Alex inside that object.

113
00:07:45,870 --> 00:07:49,080
Look at some how to actually remove a property from this thing.

114
00:07:49,200 --> 00:07:54,600
We can either can we use a kind of Genki way that I don't really recommend right here where we would

115
00:07:54,660 --> 00:07:58,300
essentially overwrite a property with a value of undefined.

116
00:07:58,340 --> 00:08:04,250
So an example that would be like dot dot dot profil with name undefined.

117
00:08:04,860 --> 00:08:10,410
Now I notice that when we do that it does kind of remove that property by setting the keys value equal

118
00:08:10,410 --> 00:08:11,750
to undefined.

119
00:08:11,910 --> 00:08:14,480
But the key value pair still exists inside of you.

120
00:08:14,490 --> 00:08:17,830
So it's not really a true removal of that property.

121
00:08:17,860 --> 00:08:22,020
A much easier way to do this would be to use the load ash library.

122
00:08:22,050 --> 00:08:26,280
So this is a reference to the load ash library that's the underscore right there.

123
00:08:26,280 --> 00:08:32,700
Loadout is a very popular javascript library for working with objects and arrays so to give you a very

124
00:08:32,700 --> 00:08:35,750
quick example we could go over to the load ask documentation.

125
00:08:35,760 --> 00:08:38,780
You don't have to navigate over here I'm going to give you a very quick example.

126
00:08:39,030 --> 00:08:43,620
So this is the load documentation when I open up the console at the load ash page.

127
00:08:43,620 --> 00:08:49,820
They have very helpfully assigned the load library in the console to the value of underscore.

128
00:08:49,820 --> 00:08:54,450
And so you can only write the code I'm about to write on the load documentation page.

129
00:08:54,450 --> 00:09:03,330
So if I created a profile over here and said name of Sam I could then Paul underscore omit house in

130
00:09:03,330 --> 00:09:08,880
my profile and say that I want to remove the property Sam from that profile you'll see that now I get

131
00:09:08,880 --> 00:09:14,700
back an object that does not have name inside of it but I can still reference the original profile and

132
00:09:14,700 --> 00:09:19,650
I see that the original one it still has that key value pair and so omit is not going to mutate that

133
00:09:19,680 --> 00:09:20,340
object.

134
00:09:20,340 --> 00:09:23,570
It's going to create a new object without the name property.

135
00:09:24,360 --> 00:09:24,910
All right.

136
00:09:24,930 --> 00:09:28,670
So like I said you're going to be seeing code like this on the right hand side.

137
00:09:28,770 --> 00:09:34,510
Extremely frequently inside of reducers that you write all the statements you see over here.

138
00:09:34,540 --> 00:09:39,740
You are going to write inside of a reducer just nonstop again and again and again every time that you

139
00:09:39,740 --> 00:09:45,210
are working with an array or an object and you want to somehow modify what is inside it to give an array

140
00:09:45,210 --> 00:09:46,470
or object.

141
00:09:46,530 --> 00:09:46,830
All right.

142
00:09:46,830 --> 00:09:48,900
Now we've got a better idea of what's going on here.

143
00:09:48,900 --> 00:09:50,250
Let's take a quick pause.

144
00:09:50,310 --> 00:09:54,210
When we come back the next section we're going to finally finish off our post reducer.

145
00:09:54,300 --> 00:09:57,480
Now that we've got a better idea of how these reducers really behave.

146
00:09:57,570 --> 00:09:59,400
So quick break I'll see you in just a minute.