1
00:00:00,470 --> 00:00:03,230
The section we had a long demo of redux.

2
00:00:03,330 --> 00:00:08,280
We're going to continue in this section by trying to answer that one burning question that might be

3
00:00:08,280 --> 00:00:14,520
in your head which is why in the world would we ever write code like this.

4
00:00:14,520 --> 00:00:15,580
What's the point.

5
00:00:15,600 --> 00:00:18,720
Why do we have actions and reducers and stuff.

6
00:00:18,720 --> 00:00:21,840
Why don't we just split the string and be done with it.

7
00:00:21,840 --> 00:00:28,530
Hey that's a fantastic question and that's probably the most important question there is with redux

8
00:00:29,040 --> 00:00:31,410
all these actions reducers store stuff.

9
00:00:31,410 --> 00:00:32,910
What is the point of it.

10
00:00:32,910 --> 00:00:35,730
Let me tell you what the point is in one sentence.

11
00:00:35,750 --> 00:00:39,560
I'm going to try the rest of this course to convince you of this one point.

12
00:00:39,990 --> 00:00:47,550
Redux is one of the best libraries in existence for scaling an application to be very large with the

13
00:00:47,550 --> 00:00:50,350
least amount of code complexity.

14
00:00:50,370 --> 00:00:56,100
In other words as your apps start to grow start to get more features redux will help you write code

15
00:00:56,130 --> 00:01:00,930
in such a fashion that your code doesn't also have to grow in complexity.

16
00:01:00,930 --> 00:01:02,500
So that's the point of Redus.

17
00:01:02,640 --> 00:01:04,200
But why is that the case.

18
00:01:04,210 --> 00:01:06,830
You know how can I make that claim easy.

19
00:01:06,840 --> 00:01:08,260
I can easily make that claim.

20
00:01:08,280 --> 00:01:10,530
The answer is the action system.

21
00:01:10,530 --> 00:01:17,520
This whole process of dispatching an action and receiving it inside the reducer with Reebok's actions

22
00:01:17,550 --> 00:01:22,940
give us the ability to make predictable changes to the state of our application.

23
00:01:22,990 --> 00:01:29,220
We will never ever reach directly into our store you know reach directly into this thing and start messing

24
00:01:29,220 --> 00:01:31,870
around with a state that is contained within it.

25
00:01:32,130 --> 00:01:39,590
Instead we will create an action and actions modify our state in one very particular way.

26
00:01:39,630 --> 00:01:45,860
That means that we can only modify our application state in a very finite number of ways.

27
00:01:45,930 --> 00:01:52,230
Now at this point in the OP I can only change my app my state in my state object which I retrieve via

28
00:01:52,350 --> 00:01:55,770
stored die state in exactly one fashion.

29
00:01:56,650 --> 00:02:01,240
Via the action that we wrote right here the action with tyed split string.

30
00:02:01,450 --> 00:02:09,220
Because I only have one action I know without a fact with absolute guaranteed certainty that my application

31
00:02:09,280 --> 00:02:14,350
will always have a state of either empty array or.

32
00:02:14,500 --> 00:02:18,520
I think I lost a good state on here let me throw it back in really quick.

33
00:02:18,520 --> 00:02:24,040
My state is always give me either an empty array or an array with some strings inside of it.

34
00:02:24,070 --> 00:02:30,700
That's it my state will never be an object a string a number a boolean nothing else.

35
00:02:30,700 --> 00:02:35,090
I will only ever have an array or an array of characters.

36
00:02:35,110 --> 00:02:37,090
That's it.

37
00:02:37,090 --> 00:02:42,070
Now that's my case for using redux But for right now we should be a lot more concerned with exactly

38
00:02:42,070 --> 00:02:43,110
how it works.

39
00:02:43,240 --> 00:02:45,720
So let's review the code we've got so far.

40
00:02:45,730 --> 00:02:47,890
First we created a reducer

41
00:02:51,150 --> 00:02:52,080
lost my spot.

42
00:02:52,080 --> 00:02:52,550
There you go.

43
00:02:52,560 --> 00:02:54,120
First recruiter douceur.

44
00:02:54,160 --> 00:02:58,730
Here is a function that produces some amount of state number.

45
00:02:58,800 --> 00:03:02,460
Then we created a store and passed it that one reducer.

46
00:03:02,700 --> 00:03:09,290
So we now have an instance of a store that contains one reduce error and the state that that one reducer

47
00:03:09,300 --> 00:03:10,280
produces.

48
00:03:10,290 --> 00:03:16,650
So by default if we call get stayed on that store we got back an empty array because that is what the

49
00:03:16,650 --> 00:03:20,380
reducer produced.

50
00:03:20,440 --> 00:03:22,250
Next we made an action.

51
00:03:22,390 --> 00:03:29,050
The action is a very specific directive to tell the reducer how to update it state in a very particular

52
00:03:29,050 --> 00:03:32,600
fashion so our action was of type split.

53
00:03:32,680 --> 00:03:34,810
String to the typewrite.

54
00:03:34,810 --> 00:03:40,420
Here you can think of as being like the command or the direction that we're issuing to the reducer and

55
00:03:40,420 --> 00:03:43,450
then we also passed along a payload property.

56
00:03:43,450 --> 00:03:49,300
The payload property is the data that we want to communicate to the reducer so we can read this action

57
00:03:49,300 --> 00:03:52,190
in plain text more or less as hey reducer.

58
00:03:52,210 --> 00:03:53,940
Please split the string.

59
00:03:54,070 --> 00:03:56,470
And here is the string that I want you to split.

60
00:03:57,890 --> 00:04:04,430
Next we sent that string off for that excuse me that action off to all of our reducers by calling store

61
00:04:04,460 --> 00:04:09,710
dot dispatch with the action when we dispatch an action as refer to it.

62
00:04:09,710 --> 00:04:15,660
The action will get automatically sent to all of the different reducers insider application so let's

63
00:04:15,660 --> 00:04:18,780
experiment now by adding another action.

64
00:04:18,870 --> 00:04:26,100
I wanted to make an action that will take my current array of characters which is a SDF and I want to

65
00:04:26,100 --> 00:04:28,820
just add another character at the end of this right.

66
00:04:28,920 --> 00:04:35,750
So I want to have an action that modifies my state by adding another character to the end of the first

67
00:04:35,750 --> 00:04:37,170
real defining action.

68
00:04:37,520 --> 00:04:43,100
So I'll write out my new action and I'm going to call it very simply action to

69
00:04:45,860 --> 00:04:48,380
remember that actions are objects.

70
00:04:48,380 --> 00:04:56,300
They must have a type property I'm going to give is why type property of add character and then a payload

71
00:04:56,390 --> 00:04:57,210
of a.

72
00:04:57,500 --> 00:05:03,950
So if I read this like you know read this in a very literal fashion I would read this action too as

73
00:05:03,950 --> 00:05:08,050
meaning please add another character to the end of my state array.

74
00:05:08,180 --> 00:05:13,680
And that character to add should be a K so that's basically the idea here.

75
00:05:13,700 --> 00:05:16,710
So now we're going to dispatch this action.

76
00:05:16,880 --> 00:05:21,920
Remember that by just creating an action nothing nothing actually occurs by just creating one we have

77
00:05:21,920 --> 00:05:29,900
to actually dispatch it dispatching an action sends it off to reduce or reduce or we'll rerun and whatever

78
00:05:29,900 --> 00:05:34,560
this reduce or returns becomes our state inside of our store.

79
00:05:34,850 --> 00:05:39,170
We can then retrieve that state by calling store doc state.

80
00:05:39,170 --> 00:05:47,300
So now we're going to dispatch the action by calling store dispatch action to

81
00:05:49,960 --> 00:05:52,740
again when we pass an action to the dispatch method.

82
00:05:52,780 --> 00:05:55,950
It gets sent to all the reducers that are hooked up to our store.

83
00:05:55,960 --> 00:05:58,380
In our case we've only got one right here.

84
00:05:58,510 --> 00:06:01,260
Our seducer will then immediately rerun.

85
00:06:01,300 --> 00:06:08,980
So this reruns right here and return a new updated updated piece of state the store.

86
00:06:09,040 --> 00:06:15,240
Notice though that even though we added in another dispatch Let's check our state really quick if I

87
00:06:15,240 --> 00:06:22,520
call store don't get state my state inside of my store has not actually changed and nothing has occurred

88
00:06:22,520 --> 00:06:22,720
yet.

89
00:06:22,730 --> 00:06:27,930
I still just have a state of a SDF that's all there is right now.

90
00:06:27,950 --> 00:06:34,130
So I notice our producer has decided that it does not care about the action that was dispatched.

91
00:06:34,130 --> 00:06:36,500
So we just ignored it entirely.

92
00:06:36,500 --> 00:06:38,020
This is a really important fact.

93
00:06:38,030 --> 00:06:43,430
It means that if we have multiple reducers in our application E-Street user will be called with every

94
00:06:43,430 --> 00:06:44,790
dispatch action.

95
00:06:44,900 --> 00:06:51,550
So it's up to us to make sure that this reduce right here watches for actions of a very particular type.

96
00:06:51,560 --> 00:06:58,620
So in our case we want to make sure that this reducer also responds to an action of type add character.

97
00:06:58,640 --> 00:07:03,010
So to do so we'll add another if statement in here or another catch say.

98
00:07:03,020 --> 00:07:08,530
Else if and Dot type equals add character

99
00:07:11,750 --> 00:07:17,510
then I want to add that character to the end of my array of characters right here.

100
00:07:17,550 --> 00:07:23,600
Is it like this a SDF that means do I need to already know what this producer returns the last time

101
00:07:23,600 --> 00:07:24,180
it ran right.

102
00:07:24,190 --> 00:07:25,140
I need to know.

103
00:07:25,250 --> 00:07:25,640
OK.

104
00:07:25,640 --> 00:07:32,390
I already dispatched one action and my current state is a SDF and now I intend to add on a character

105
00:07:32,780 --> 00:07:37,180
to the end of that array a character a.

106
00:07:37,190 --> 00:07:39,920
So how do we get access to that previous array.

107
00:07:39,920 --> 00:07:45,380
How do we get access to like that previously calculated piece of state that is the job of the first

108
00:07:45,380 --> 00:07:49,790
argument to the reducer which we have labeled as state here.

109
00:07:49,790 --> 00:07:55,550
Reducers rerun many times throughout her application and each time they are called they are past the

110
00:07:55,550 --> 00:08:01,940
result of the last time they were called as the first element which we by convention refer to as state.

111
00:08:02,270 --> 00:08:09,080
So again each time we dispatched an action we are making an incremental change to the state of our application.

112
00:08:09,130 --> 00:08:17,120
So now inside of here we'll take our state and we'll push on action not payload and then return that

113
00:08:17,120 --> 00:08:24,380
modified state now or get state call returns SDF and a.

114
00:08:24,430 --> 00:08:26,950
So is the new character that was appended out yet.

115
00:08:28,200 --> 00:08:33,960
Let me pause for a moment though and I want to say that I just made a huge huge error in the code that

116
00:08:33,960 --> 00:08:37,870
I just added right here something that is very subtle.

117
00:08:37,980 --> 00:08:41,310
I want you to take a look at the two lines that I just added.

118
00:08:41,310 --> 00:08:49,050
I took my current state object and I added in another character to it using push and then I returned

119
00:08:49,050 --> 00:08:51,390
that object.

120
00:08:51,590 --> 00:08:53,630
Now sure that seems like an OK thing to do right.

121
00:08:53,630 --> 00:08:58,720
Like Stephen you said we need to add in a character to the end here and not.

122
00:08:58,730 --> 00:08:59,580
Not quite.

123
00:08:59,600 --> 00:09:06,020
So this is the one big rule of reducers whenever we change our state object and reducers like whenever

124
00:09:06,020 --> 00:09:13,640
we make a tiny very subtle change we must return a completely new object or a completely new array or

125
00:09:13,640 --> 00:09:16,160
whatever data structure we might be using.

126
00:09:16,340 --> 00:09:20,390
In other words we do not mutate our data as we did right here.

127
00:09:20,390 --> 00:09:27,770
Instead we create a completely new data structure the code that I wrote right here mutates our existing

128
00:09:27,770 --> 00:09:34,130
state terrain by calling push on it some taking his existing array and I'm modifying it which is not

129
00:09:34,130 --> 00:09:35,430
what we want to do.

130
00:09:35,480 --> 00:09:40,900
We are going to in a future sexually and talk in great detail about why that's the case for right now

131
00:09:40,910 --> 00:09:45,620
I just want to kind of plant it in your head like this you know like seed of a thought that we do not

132
00:09:45,620 --> 00:09:50,430
mutate our state and to reduce or instead we completely recreate recreate it.

133
00:09:51,170 --> 00:09:56,540
So to fix this I'm going to replace these two lines with a little bit of six code.

134
00:09:56,760 --> 00:10:01,130
I'm going instead write return and I'll open up an array.

135
00:10:01,280 --> 00:10:09,170
Dot dot dot state comma action dot payload and then close off the array like so.

136
00:10:09,170 --> 00:10:12,830
This line right here now says make a new array.

137
00:10:12,860 --> 00:10:19,910
Indicated by these outside brackets take all of the elements in the current state array and toss them

138
00:10:19,910 --> 00:10:20,640
in here.

139
00:10:20,990 --> 00:10:25,530
And then also Tolleson action not payload as the last entry as well.

140
00:10:25,550 --> 00:10:31,030
More importantly it creates an entirely new array which is the requirement that we must satisfy with

141
00:10:31,030 --> 00:10:32,990
redux inside reducer.

142
00:10:32,990 --> 00:10:37,910
Now again we'll talk about why this is the case in the future but for now just remember the golden rule

143
00:10:38,090 --> 00:10:41,440
we always return brand new objects from reducers.

144
00:10:42,010 --> 00:10:47,030
OK so believe it or not I'm sure you're still incredibly confused but this is the end of our very brief

145
00:10:47,030 --> 00:10:48,490
introduction to redux.

146
00:10:48,530 --> 00:10:53,710
So I absolutely in no way shape or form expect you to be a master of redux at all.

147
00:10:53,720 --> 00:10:55,590
Not not one bit.

148
00:10:55,630 --> 00:11:00,600
In fact I'm going to continue with the next section by assuming that you know absolutely nothing about

149
00:11:00,600 --> 00:11:01,280
it.

150
00:11:01,370 --> 00:11:02,920
Redux is tough it's hard.

151
00:11:02,930 --> 00:11:04,040
It's a different way of thinking.

152
00:11:04,040 --> 00:11:06,350
So we're going to take things nice and slow.

153
00:11:06,380 --> 00:11:12,410
The only intent I had inside of this section and the previous sections was to introduce you to the ideas

154
00:11:12,650 --> 00:11:20,530
of a reducer an action dispatching actions and pulling a state out of our store.

155
00:11:20,570 --> 00:11:22,580
OK so that's those are the big takeaways here.

156
00:11:22,580 --> 00:11:25,250
That's all I really want you to get this.

157
00:11:25,250 --> 00:11:26,820
We're going to continue now in the next section.

158
00:11:26,830 --> 00:11:32,420
And again I'm basically going to assume that you know nothing about redux anyways so let's continue

159
00:11:32,480 --> 00:11:38,410
on the next application and continue working on our actual re-act native application.

160
00:11:38,420 --> 00:11:39,000
I'll see you there