1
00:00:00,630 --> 00:00:01,463
Instructor: In the last section

2
00:00:01,463 --> 00:00:03,270
we had a long demo of Redux.

3
00:00:03,270 --> 00:00:05,190
We're going to continue in this section

4
00:00:05,190 --> 00:00:07,590
by trying to answer that one burning question

5
00:00:07,590 --> 00:00:10,170
that might be in your head, which is,

6
00:00:10,170 --> 00:00:14,460
Why in the world would we ever write code like this?

7
00:00:14,460 --> 00:00:15,540
What's the point?

8
00:00:15,540 --> 00:00:18,660
Why do we have actions and reducers and stuff?

9
00:00:18,660 --> 00:00:21,750
Why don't I just split this string and be done with it?

10
00:00:21,750 --> 00:00:25,680
Hey, that's a fantastic question and that's probably

11
00:00:25,680 --> 00:00:28,950
the most important question there is with Redux.

12
00:00:28,950 --> 00:00:31,380
All these actions, reducers, store stuff.

13
00:00:31,380 --> 00:00:32,850
What is the point of it?

14
00:00:32,850 --> 00:00:35,640
Let me tell you what the point is in one sentence,

15
00:00:35,640 --> 00:00:37,530
and I'm gonna try the rest of this course

16
00:00:37,530 --> 00:00:39,930
to convince you of this one point.

17
00:00:39,930 --> 00:00:42,570
Redux is one of the best libraries

18
00:00:42,570 --> 00:00:47,220
in existence for scaling an application to be very large

19
00:00:47,220 --> 00:00:50,280
with the least amount of code complexity.

20
00:00:50,280 --> 00:00:52,620
In other words, as your apps start to grow,

21
00:00:52,620 --> 00:00:56,100
start to get more features, Redux will help you write code

22
00:00:56,100 --> 00:00:58,620
in such a fashion that your code doesn't also

23
00:00:58,620 --> 00:01:00,780
have to grow in complexity.

24
00:01:00,780 --> 00:01:04,140
So that's the point of Redux, but why is that the case?

25
00:01:04,140 --> 00:01:06,210
You know, how can I make that claim?

26
00:01:06,210 --> 00:01:08,250
Easy, I can easily make that claim.

27
00:01:08,250 --> 00:01:10,470
The answer is the action system.

28
00:01:10,470 --> 00:01:13,560
This whole process of dispatching an action

29
00:01:13,560 --> 00:01:16,140
and receiving it inside the reducer.

30
00:01:16,140 --> 00:01:18,510
With Redux actions give us the ability to

31
00:01:18,510 --> 00:01:22,920
make predictable changes to the state of our application.

32
00:01:22,920 --> 00:01:25,890
We will never, ever reach directly into our store,

33
00:01:25,890 --> 00:01:28,230
you know reach directly into this thing,

34
00:01:28,230 --> 00:01:30,330
and start messing around with a state

35
00:01:30,330 --> 00:01:32,070
that is contained within it.

36
00:01:32,070 --> 00:01:34,770
Instead, we will create an action

37
00:01:34,770 --> 00:01:39,570
and actions modify our state in one very particular way.

38
00:01:39,570 --> 00:01:42,230
That means that we can only modify our application state

39
00:01:42,230 --> 00:01:44,793
in a very finite number of ways.

40
00:01:45,870 --> 00:01:48,630
Now at this point in the app, I can only change my app,

41
00:01:48,630 --> 00:01:50,880
my state, you know my state object,

42
00:01:50,880 --> 00:01:55,880
which I retrieve via store.getState, in exactly one fashion

43
00:01:56,160 --> 00:01:59,190
via the action that we wrote right here,

44
00:01:59,190 --> 00:02:01,380
the action with type split_string.

45
00:02:01,380 --> 00:02:05,340
Because I only have one action, I know without a fact

46
00:02:05,340 --> 00:02:07,860
with absolute guaranteed certainty

47
00:02:07,860 --> 00:02:10,650
that my application will always have a state

48
00:02:10,650 --> 00:02:13,470
of either empty array

49
00:02:13,470 --> 00:02:14,430
or...

50
00:02:14,430 --> 00:02:16,170
I think I lost a getState on here.

51
00:02:16,170 --> 00:02:18,420
Let me throw it back in really quick.

52
00:02:18,420 --> 00:02:21,750
My state is always gonna be either an empty array

53
00:02:21,750 --> 00:02:24,000
or an array with some strings inside of it.

54
00:02:24,000 --> 00:02:24,900
That's it.

55
00:02:24,900 --> 00:02:28,830
My state will never be an object, a string, a number,

56
00:02:28,830 --> 00:02:30,630
a boolean, nothing else.

57
00:02:30,630 --> 00:02:35,040
I will only ever have an array or an array of characters.

58
00:02:35,040 --> 00:02:35,873
That's it.

59
00:02:37,020 --> 00:02:39,000
Now that's my case for using Redux.

60
00:02:39,000 --> 00:02:41,430
But for right now we should be a lot more concerned

61
00:02:41,430 --> 00:02:43,170
with exactly how it works.

62
00:02:43,170 --> 00:02:45,660
So let's review the code that we've got so far.

63
00:02:45,660 --> 00:02:48,033
First we created a reducer.

64
00:02:50,717 --> 00:02:52,530
(sighs) Lost my spot, there we go.

65
00:02:52,530 --> 00:02:54,030
First we created a reducer.

66
00:02:54,030 --> 00:02:56,610
A reducer is a function that produces some amount

67
00:02:56,610 --> 00:02:58,710
of state, remember?

68
00:02:58,710 --> 00:03:02,640
Then, we created a store and passed it that one reducer.

69
00:03:02,640 --> 00:03:05,160
So we now have an instance of a store

70
00:03:05,160 --> 00:03:07,560
that contains one reducer

71
00:03:07,560 --> 00:03:10,230
and the state that that one reducer produces.

72
00:03:10,230 --> 00:03:13,590
So by default, if we call getState on that store

73
00:03:13,590 --> 00:03:15,660
we got back an empty array

74
00:03:15,660 --> 00:03:18,003
because that is what the reducer produced.

75
00:03:20,370 --> 00:03:22,320
Next, we made an action.

76
00:03:22,320 --> 00:03:25,140
The action is a very specific directive

77
00:03:25,140 --> 00:03:27,600
to tell the reducer how to updated its state

78
00:03:27,600 --> 00:03:30,000
in a very particular fashion.

79
00:03:30,000 --> 00:03:33,233
So our action was of type 'split_string'.

80
00:03:34,140 --> 00:03:35,550
The type right here you can think of

81
00:03:35,550 --> 00:03:37,980
as being like the command or the direction

82
00:03:37,980 --> 00:03:40,140
that we're issuing to the reducer.

83
00:03:40,140 --> 00:03:43,380
And then we also passed along a payload property.

84
00:03:43,380 --> 00:03:45,930
The payload property is the data that we want

85
00:03:45,930 --> 00:03:47,850
to communicate to the reducer.

86
00:03:47,850 --> 00:03:51,390
So we can read this action in plain text, more or less as,

87
00:03:51,390 --> 00:03:54,000
Hey reducer, please split the string,

88
00:03:54,000 --> 00:03:56,400
and here is the string that I want you to split.

89
00:03:57,810 --> 00:04:00,210
Next, we sent that string off or that, excuse me,

90
00:04:00,210 --> 00:04:03,090
that action off to all of our reducers

91
00:04:03,090 --> 00:04:06,780
by calling store.dispatch with the action.

92
00:04:06,780 --> 00:04:09,630
When we dispatch an action, as we refer to it,

93
00:04:09,630 --> 00:04:11,640
the action will get automatically sent

94
00:04:11,640 --> 00:04:14,440
to all of the different reducers inside our application.

95
00:04:15,300 --> 00:04:18,810
So let's experiment now by adding another action.

96
00:04:18,810 --> 00:04:22,079
I want to make an action that will take my current array

97
00:04:22,079 --> 00:04:24,327
of characters, which is "a","s","d","f",

98
00:04:25,350 --> 00:04:27,660
and I want to just add another character

99
00:04:27,660 --> 00:04:28,860
at the end of this array.

100
00:04:28,860 --> 00:04:31,920
So I just wanna have an action that modifies my state

101
00:04:31,920 --> 00:04:35,130
by adding another character to the end of the array.

102
00:04:35,130 --> 00:04:37,470
So first we'll define an action.

103
00:04:37,470 --> 00:04:39,900
So I'll write out my new action.

104
00:04:39,900 --> 00:04:42,340
And I'm gonna call it very simply action2.

105
00:04:45,810 --> 00:04:48,330
Remember that actions are objects.

106
00:04:48,330 --> 00:04:50,340
They must have a type property.

107
00:04:50,340 --> 00:04:53,807
I'm gonna give this one a type property of 'add_character'.

108
00:04:55,145 --> 00:04:57,450
And then a payload of 'a'.

109
00:04:57,450 --> 00:04:59,310
So if I read this like you know,

110
00:04:59,310 --> 00:05:01,560
read this in a very literal fashion,

111
00:05:01,560 --> 00:05:04,201
I would read this action2 as meaning,

112
00:05:04,201 --> 00:05:08,130
Please add another character to the end of my state array.

113
00:05:08,130 --> 00:05:10,620
And that character to add should be 'a'.

114
00:05:10,620 --> 00:05:13,650
Okay, so that's that's basically the idea here.

115
00:05:13,650 --> 00:05:16,830
So now we're going to dispatch this action.

116
00:05:16,830 --> 00:05:19,710
Remember that by just creating an action, nothing, you know

117
00:05:19,710 --> 00:05:21,660
nothing actually occurs by just creating one.

118
00:05:21,660 --> 00:05:23,790
We have to actually dispatch it.

119
00:05:23,790 --> 00:05:27,150
Dispatching an action sends it off to our reducer.

120
00:05:27,150 --> 00:05:31,800
The reducer will rerun and whatever this reducer returns

121
00:05:31,800 --> 00:05:34,800
becomes our state inside of our store.

122
00:05:34,800 --> 00:05:37,893
We can then retrieve that state by calling store.getState.

123
00:05:39,090 --> 00:05:41,470
So now we're going to dispatch the action

124
00:05:42,330 --> 00:05:44,520
by calling store

125
00:05:44,520 --> 00:05:45,400
dispatch

126
00:05:46,452 --> 00:05:47,285
action2.

127
00:05:49,890 --> 00:05:52,710
Again, when we pass an action to the dispatch method

128
00:05:52,710 --> 00:05:54,990
it gets sent to all the reducers that are hooked

129
00:05:54,990 --> 00:05:55,890
up to our store.

130
00:05:55,890 --> 00:05:58,470
In our case, we've only got one right here.

131
00:05:58,470 --> 00:06:01,260
Our reducer will then immediately rerun.

132
00:06:01,260 --> 00:06:03,840
So this reruns right here.

133
00:06:03,840 --> 00:06:07,380
And return a new update updated piece of state

134
00:06:07,380 --> 00:06:08,970
for the store.

135
00:06:08,970 --> 00:06:10,290
Notice though that even though

136
00:06:10,290 --> 00:06:13,560
we added in another dispatch...

137
00:06:13,560 --> 00:06:15,030
Let's check our state really quick.

138
00:06:15,030 --> 00:06:17,020
If I call it store.getState

139
00:06:18,240 --> 00:06:21,540
my state inside of my store has not actually changed.

140
00:06:21,540 --> 00:06:22,710
So nothing has occurred yet.

141
00:06:22,710 --> 00:06:25,680
I still just have a state of "a","s","d","f".

142
00:06:25,680 --> 00:06:27,870
That's all there is right now.

143
00:06:27,870 --> 00:06:30,990
So notice or our reducer has decided

144
00:06:30,990 --> 00:06:34,050
that it does not care about the action that was dispatched.

145
00:06:34,050 --> 00:06:36,420
So it just ignored it entirely.

146
00:06:36,420 --> 00:06:37,980
This is a really important fact.

147
00:06:37,980 --> 00:06:40,080
It means that if we have multiple reducers

148
00:06:40,080 --> 00:06:42,720
in our application each reducer will be called

149
00:06:42,720 --> 00:06:44,850
with every dispatched action.

150
00:06:44,850 --> 00:06:46,410
So it's up to us to make sure

151
00:06:46,410 --> 00:06:48,570
that this reducer right here watches

152
00:06:48,570 --> 00:06:51,480
for actions of a very particular type.

153
00:06:51,480 --> 00:06:52,950
So in our case, we want to make sure

154
00:06:52,950 --> 00:06:55,140
that this reducer also responds

155
00:06:55,140 --> 00:06:58,675
to an action of type "add_character".

156
00:06:58,675 --> 00:07:01,650
So to do so, we'll add another if statement in here

157
00:07:01,650 --> 00:07:02,640
or another catch.

158
00:07:02,640 --> 00:07:03,970
Let's say, else if

159
00:07:04,830 --> 00:07:06,690
action.type

160
00:07:06,690 --> 00:07:08,867
equals 'add_character'.

161
00:07:11,670 --> 00:07:14,220
Then I want to add that character

162
00:07:14,220 --> 00:07:17,460
to the end of my array of characters right here.

163
00:07:17,460 --> 00:07:19,350
Okay, so like this "a","s","d","f".

164
00:07:19,350 --> 00:07:21,570
That means that I need to already know

165
00:07:21,570 --> 00:07:24,180
what this reducer returned the last time it ran, right?

166
00:07:24,180 --> 00:07:25,200
I need to know,

167
00:07:25,200 --> 00:07:27,780
Okay, I already dispatched one action

168
00:07:27,780 --> 00:07:30,000
and my current state is "a","s","d","f"

169
00:07:30,000 --> 00:07:32,700
and now I intend to add on a character

170
00:07:32,700 --> 00:07:33,990
to the end of that array,

171
00:07:33,990 --> 00:07:35,127
a character 'a'.

172
00:07:37,110 --> 00:07:39,870
So how do we get access to that previous array?

173
00:07:39,870 --> 00:07:40,703
How do we get access

174
00:07:40,703 --> 00:07:43,800
to like that previously calculated piece of state?

175
00:07:43,800 --> 00:07:47,430
That is the job of the first argument to the reducer

176
00:07:47,430 --> 00:07:49,740
which we have labeled as state here.

177
00:07:49,740 --> 00:07:53,130
Reducers rerun many times throughout our application

178
00:07:53,130 --> 00:07:56,010
and each time they are called, they are passed the result

179
00:07:56,010 --> 00:07:59,280
of the last time they were called as the first element,

180
00:07:59,280 --> 00:08:02,190
which we by convention refer to as state.

181
00:08:02,190 --> 00:08:04,890
So again, each time we dispatch an action

182
00:08:04,890 --> 00:08:07,140
we are making an incremental change

183
00:08:07,140 --> 00:08:09,090
to the state of our application.

184
00:08:09,090 --> 00:08:13,170
So now inside of here we'll take our state and we'll push

185
00:08:13,170 --> 00:08:18,170
on 'action.payload' and then return that modified state.

186
00:08:19,680 --> 00:08:24,360
Now our getState call returns "a","s","d","f" and "a".

187
00:08:24,360 --> 00:08:27,210
So "a" is the new character that was appended at the end.

188
00:08:28,140 --> 00:08:29,670
Let me pause for a moment though.

189
00:08:29,670 --> 00:08:33,210
And I want to say that I just made a huge huge error

190
00:08:33,210 --> 00:08:34,890
in the code that I just added right here.

191
00:08:34,890 --> 00:08:37,023
Something that is very subtle.

192
00:08:37,919 --> 00:08:38,820
I want you to take a look

193
00:08:38,820 --> 00:08:41,250
at the two lines that I just added.

194
00:08:41,250 --> 00:08:44,310
I took my current state object

195
00:08:44,310 --> 00:08:48,360
and then I added in another character to it using push

196
00:08:48,360 --> 00:08:49,960
and then I returned that object.

197
00:08:51,540 --> 00:08:53,580
Now sure, this seems like an okay thing to do, right?

198
00:08:53,580 --> 00:08:56,550
Like, Steven, you said we need to add in a character

199
00:08:56,550 --> 00:08:57,911
to the end here.

200
00:08:57,911 --> 00:08:59,520
Not, not quite.

201
00:08:59,520 --> 00:09:02,460
So this is the one big rule of reducers.

202
00:09:02,460 --> 00:09:05,520
Whenever we change our state object and reducers,

203
00:09:05,520 --> 00:09:08,790
like whenever we, you know, make a tiny very subtle change,

204
00:09:08,790 --> 00:09:11,760
we must return a completely new object

205
00:09:11,760 --> 00:09:13,500
or a completely new array

206
00:09:13,500 --> 00:09:16,260
or whatever data structure we might be using.

207
00:09:16,260 --> 00:09:19,020
In other words, we do not mutate our data

208
00:09:19,020 --> 00:09:20,310
as we did right here.

209
00:09:20,310 --> 00:09:24,720
Instead we create a completely new data structure.

210
00:09:24,720 --> 00:09:26,400
The code that I wrote right here

211
00:09:26,400 --> 00:09:29,790
mutates our existing state array by calling push on it.

212
00:09:29,790 --> 00:09:33,450
So I'm taking this existing array and I'm modifying it

213
00:09:33,450 --> 00:09:35,400
which is not what we want to do.

214
00:09:35,400 --> 00:09:37,770
We are going to, in a future section we're gonna talk

215
00:09:37,770 --> 00:09:40,320
in great detail about why that's the case.

216
00:09:40,320 --> 00:09:42,000
For right now, I just want to kind of plant it

217
00:09:42,000 --> 00:09:44,130
in your head like this, kinda like seed

218
00:09:44,130 --> 00:09:47,250
of a thought that we do not mutate our state in a reducer.

219
00:09:47,250 --> 00:09:49,893
Instead we completely recreate recreate it.

220
00:09:51,120 --> 00:09:54,450
So to fix this, I'm going to replace our these two lines

221
00:09:54,450 --> 00:09:56,820
with a little bit of ES6 code.

222
00:09:56,820 --> 00:09:59,580
I'm gonna instead write return

223
00:09:59,580 --> 00:10:01,880
and then I'll open up an array

224
00:10:01,880 --> 00:10:03,660
...state

225
00:10:03,660 --> 00:10:04,500
comma

226
00:10:04,500 --> 00:10:06,570
action.payload

227
00:10:06,570 --> 00:10:09,090
and then close off the array like so.

228
00:10:09,090 --> 00:10:11,190
This line right here now says,

229
00:10:11,190 --> 00:10:15,450
Make a new array indicated by these outside brackets.

230
00:10:15,450 --> 00:10:19,140
Take all of the elements in the current state array

231
00:10:19,140 --> 00:10:22,020
and toss them in here and then also toss

232
00:10:22,020 --> 00:10:25,470
in action.payload as the last entry as well.

233
00:10:25,470 --> 00:10:28,350
More importantly, it creates an entirely new array

234
00:10:28,350 --> 00:10:30,780
which is the requirement that we must satisfy

235
00:10:30,780 --> 00:10:32,910
with Redux inside a reducer.

236
00:10:32,910 --> 00:10:34,890
Now again, we'll talk about why this is the case

237
00:10:34,890 --> 00:10:38,010
in the future, but for now, just remember the golden rule,

238
00:10:38,010 --> 00:10:41,013
We always return brand new objects from reducers.

239
00:10:41,940 --> 00:10:43,650
Okay? So believe it or not

240
00:10:43,650 --> 00:10:45,270
I'm sure you're still incredibly confused,

241
00:10:45,270 --> 00:10:48,480
but this is the end of our very brief introduction to Redux.

242
00:10:48,480 --> 00:10:51,810
So I absolutely in no way, shape or form expect you

243
00:10:51,810 --> 00:10:53,670
to be a master of Redux at all.

244
00:10:53,670 --> 00:10:55,500
Not not one bit.

245
00:10:55,500 --> 00:10:58,020
And in fact I'm going to continue in the next section

246
00:10:58,020 --> 00:11:01,290
by assuming that you know absolutely nothing about it.

247
00:11:01,290 --> 00:11:03,990
Redux is tough, it's hard, it's a different way of thinking.

248
00:11:03,990 --> 00:11:06,330
So we're going to take things nice and slow.

249
00:11:06,330 --> 00:11:08,880
The only intent I had inside of this section

250
00:11:08,880 --> 00:11:11,190
and the previous sections was to introduce you

251
00:11:11,190 --> 00:11:14,250
to the ideas of a reducer,

252
00:11:14,250 --> 00:11:15,750
an action,

253
00:11:15,750 --> 00:11:18,120
dispatching actions,

254
00:11:18,120 --> 00:11:20,520
and pulling state out of our store.

255
00:11:20,520 --> 00:11:22,560
Okay, so that's, those are the big like takeaways here.

256
00:11:22,560 --> 00:11:25,230
That's all I really wanted you to get out of this.

257
00:11:25,230 --> 00:11:26,760
We're gonna continue now in the next section.

258
00:11:26,760 --> 00:11:28,770
And again, I'm basically going to assume

259
00:11:28,770 --> 00:11:31,560
that you know nothing about Redux anyways.

260
00:11:31,560 --> 00:11:33,930
So let's continue on the next application

261
00:11:33,930 --> 00:11:38,340
and continue working on our actual React Native application.

262
00:11:38,340 --> 00:11:39,290
I'll see you there.