1
00:00:01,260 --> 00:00:02,820
‫Now it's time to create

2
00:00:02,820 --> 00:00:06,453
‫that Redux store that we talked about in the beginning.

3
00:00:07,980 --> 00:00:11,250
‫So now we will use an actual Redux feature

4
00:00:11,250 --> 00:00:13,350
‫for the very first time.

5
00:00:13,350 --> 00:00:16,650
‫So what we did here was simply writing an object

6
00:00:16,650 --> 00:00:18,123
‫and a function.

7
00:00:19,740 --> 00:00:23,820
‫So we didn't really use Redux yet, but now we need it.

8
00:00:23,820 --> 00:00:26,283
‫And so now we need to install it.

9
00:00:27,690 --> 00:00:29,850
‫So let's come to our terminal here

10
00:00:29,850 --> 00:00:32,440
‫and then let's do N P M install

11
00:00:33,690 --> 00:00:34,800
‫Redux.

12
00:00:34,800 --> 00:00:39,150
‫So just like this, and so out of this Redux package

13
00:00:39,150 --> 00:00:42,630
‫we will now take the create store method.

14
00:00:42,630 --> 00:00:45,273
‫So in order to create that store.

15
00:00:46,950 --> 00:00:48,693
‫So, let's import that here.

16
00:00:51,690 --> 00:00:52,523
‫Create

17
00:00:53,820 --> 00:00:54,930
‫store

18
00:00:54,930 --> 00:00:56,220
‫from

19
00:00:56,220 --> 00:00:57,690
‫Redux.

20
00:00:57,690 --> 00:00:59,520
‫And so now you see that it has like,

21
00:00:59,520 --> 00:01:01,380
‫this strike through here.

22
00:01:01,380 --> 00:01:03,090
‫And the reason for that is

23
00:01:03,090 --> 00:01:05,730
‫that the Redux team kind of declared

24
00:01:05,730 --> 00:01:08,820
‫that this method is deprecated.

25
00:01:08,820 --> 00:01:11,640
‫So as I mentioned earlier, there is now a more

26
00:01:11,640 --> 00:01:16,110
‫modern way of writing Redux, which is Redux Toolkit.

27
00:01:16,110 --> 00:01:19,590
‫However, I still believe that it is really way

28
00:01:19,590 --> 00:01:23,100
‫better to first learn Redux in this way.

29
00:01:23,100 --> 00:01:25,290
‫So in the way that I'm showing you now.

30
00:01:25,290 --> 00:01:28,170
‫And then once you have all the Redux knowledge,

31
00:01:28,170 --> 00:01:31,200
‫to then transition into Redux Toolkit.

32
00:01:31,200 --> 00:01:33,930
‫Because otherwise everything will

33
00:01:33,930 --> 00:01:36,060
‫really just seem like magic.

34
00:01:36,060 --> 00:01:37,920
‫It works just too easily,

35
00:01:37,920 --> 00:01:41,100
‫and then you have no idea what is going on.

36
00:01:41,100 --> 00:01:44,010
‫And so that's why they also tell us

37
00:01:44,010 --> 00:01:44,843
‫down here

38
00:01:45,840 --> 00:01:46,803
‫that-

39
00:01:48,210 --> 00:01:49,260
‫well, where we start-

40
00:01:51,060 --> 00:01:51,893
‫Uh, yeah.

41
00:01:51,893 --> 00:01:53,760
‫So you should not be using the Redux core package

42
00:01:53,760 --> 00:01:57,000
‫by itself except for learning purposes.

43
00:01:57,000 --> 00:01:59,880
‫And so that is exactly what we are doing here.

44
00:01:59,880 --> 00:02:02,340
‫So we're just learning how Redux works.

45
00:02:02,340 --> 00:02:06,390
‫And so for this, this is more than enough, and don't worry

46
00:02:06,390 --> 00:02:09,480
‫because this will never be removed from Redux

47
00:02:09,480 --> 00:02:10,683
‫as it says right here.

48
00:02:12,840 --> 00:02:13,770
‫Now, right?

49
00:02:13,770 --> 00:02:16,710
‫But with that warning out of the way, let's now

50
00:02:16,710 --> 00:02:18,903
‫actually create our store.

51
00:02:20,100 --> 00:02:25,100
‫So all you have to do is to call the create store function

52
00:02:25,170 --> 00:02:27,570
‫with the reducer.

53
00:02:27,570 --> 00:02:31,110
‫So that's really it, at least for now.

54
00:02:31,110 --> 00:02:33,750
‫And so then this will return the store.

55
00:02:33,750 --> 00:02:36,540
‫And so let's just call it store.

56
00:02:36,540 --> 00:02:38,280
‫So just like this.

57
00:02:38,280 --> 00:02:42,750
‫And so now on this store, we can dispatch actions.

58
00:02:42,750 --> 00:02:46,000
‫So for example, we can do store dot

59
00:02:46,950 --> 00:02:48,270
‫dispatch

60
00:02:48,270 --> 00:02:51,090
‫which is going to work in exactly the same way

61
00:02:51,090 --> 00:02:53,400
‫as the dispatch function that we got

62
00:02:53,400 --> 00:02:57,420
‫as a result of calling the use reducer hook.

63
00:02:57,420 --> 00:02:59,700
‫So again, this dispatch function

64
00:02:59,700 --> 00:03:04,410
‫is basically what we already know from use Reducer.

65
00:03:04,410 --> 00:03:07,623
‫And so this is where we can now pass in that event.

66
00:03:08,700 --> 00:03:10,360
‫So let's specify

67
00:03:11,400 --> 00:03:12,233
‫account

68
00:03:13,560 --> 00:03:14,393
‫deposit

69
00:03:16,530 --> 00:03:18,810
‫and then a payload

70
00:03:18,810 --> 00:03:20,823
‫of let's say 500.

71
00:03:22,080 --> 00:03:23,340
‫All right?

72
00:03:23,340 --> 00:03:26,400
‫But now how do we actually run this code?

73
00:03:26,400 --> 00:03:29,853
‫So how can we execute this and then see the results?

74
00:03:30,690 --> 00:03:35,070
‫Well, let's just open up or index dot JS file,

75
00:03:35,070 --> 00:03:36,090
‫which is the file

76
00:03:36,090 --> 00:03:39,060
‫that we already know will always be executed

77
00:03:39,060 --> 00:03:40,383
‫at the very beginning.

78
00:03:41,670 --> 00:03:44,073
‫So at first, let's just clean this up.

79
00:03:46,350 --> 00:03:48,480
‫And now what we're gonna do, again

80
00:03:48,480 --> 00:03:50,250
‫just for learning purposes,

81
00:03:50,250 --> 00:03:52,600
‫is to simply import that entire

82
00:03:54,450 --> 00:03:56,253
‫store dot JS file.

83
00:03:58,020 --> 00:04:00,000
‫So just like this actually.

84
00:04:00,000 --> 00:04:03,690
‫And so what this will do is to simply run the code

85
00:04:03,690 --> 00:04:06,060
‫that is here in this file.

86
00:04:06,060 --> 00:04:07,800
‫So we're not exporting anything

87
00:04:07,800 --> 00:04:12,120
‫from here and not importing it here, but all we're doing is

88
00:04:12,120 --> 00:04:14,880
‫to importing this file, which will then simply

89
00:04:14,880 --> 00:04:18,543
‫run the code that is here in the top level of this file.

90
00:04:19,440 --> 00:04:22,440
‫So if I console dot log, anything from here

91
00:04:22,440 --> 00:04:24,873
‫it will then appear in our console.

92
00:04:25,770 --> 00:04:27,510
‫So again, this is just a way

93
00:04:27,510 --> 00:04:31,623
‫of executing, or test, or learning code here.

94
00:04:32,670 --> 00:04:33,503
‫Okay?

95
00:04:33,503 --> 00:04:37,563
‫And now as always, we should be able to run NPM start.

96
00:04:39,150 --> 00:04:40,683
‫So let's wait for that.

97
00:04:42,390 --> 00:04:45,783
‫And yes, agreeing to open in another port.

98
00:04:47,010 --> 00:04:50,220
‫And then as always, this takes some time.

99
00:04:50,220 --> 00:04:51,213
‫And here we go.

100
00:04:52,050 --> 00:04:53,850
‫So this will be the application

101
00:04:53,850 --> 00:04:56,070
‫that we're gonna be working on later.

102
00:04:56,070 --> 00:04:59,310
‫So it's basically like the graphical user interface

103
00:04:59,310 --> 00:05:01,623
‫to the account that we're modeling here.

104
00:05:03,030 --> 00:05:06,633
‫But for now, I'm only interested here in the console.

105
00:05:07,980 --> 00:05:10,830
‫So let's make this even bigger so we can really

106
00:05:10,830 --> 00:05:12,480
‫see what's going on.

107
00:05:12,480 --> 00:05:16,833
‫And so indeed, we got our console dot log coming from here,

108
00:05:17,730 --> 00:05:20,160
‫but that's not really what we're interested in.

109
00:05:20,160 --> 00:05:23,160
‫Instead, we want to know console dot log

110
00:05:23,160 --> 00:05:25,560
‫store dot get

111
00:05:25,560 --> 00:05:26,790
‫state.

112
00:05:26,790 --> 00:05:28,380
‫Because that will then show us

113
00:05:28,380 --> 00:05:30,693
‫the current state of our store.

114
00:05:31,770 --> 00:05:33,030
‫And-

115
00:05:33,030 --> 00:05:34,050
‫nice!

116
00:05:34,050 --> 00:05:37,620
‫So our balance is already 500, which is because

117
00:05:37,620 --> 00:05:40,260
‫we dispatched that action right here.

118
00:05:40,260 --> 00:05:44,220
‫And so now we have Redux already working in this very

119
00:05:44,220 --> 00:05:45,053
‫simple way.

120
00:05:46,860 --> 00:05:48,510
‫So let's try another one.

121
00:05:48,510 --> 00:05:49,720
‫Let's say account

122
00:05:51,060 --> 00:05:52,083
‫withdraw,

123
00:05:53,220 --> 00:05:54,423
‫and then 200.

124
00:05:56,340 --> 00:05:58,740
‫And so then we need to log again

125
00:05:58,740 --> 00:06:00,840
‫because what we log here is only

126
00:06:00,840 --> 00:06:03,660
‫after that very first action.

127
00:06:03,660 --> 00:06:07,563
‫And so now that went down from 500 to 300.

128
00:06:08,550 --> 00:06:11,160
‫Now, we could also subscribe to the store

129
00:06:11,160 --> 00:06:14,490
‫which would then automatically show us these updates here

130
00:06:14,490 --> 00:06:15,540
‫on the screen.

131
00:06:15,540 --> 00:06:17,220
‫But let's keep it simple.

132
00:06:17,220 --> 00:06:21,690
‫Cause in the real application, we will later not need that.

133
00:06:21,690 --> 00:06:24,993
‫So there's no need to learn an additional thing here.

134
00:06:27,000 --> 00:06:29,130
‫But anyway, let's get maybe rid

135
00:06:29,130 --> 00:06:33,393
‫of this one just to clean the code a little bit.

136
00:06:34,350 --> 00:06:37,320
‫And so now I want to dispatch the action

137
00:06:37,320 --> 00:06:39,513
‫of actually requesting a loan.

138
00:06:41,220 --> 00:06:43,080
‫So request

139
00:06:43,080 --> 00:06:46,050
‫or first account, request

140
00:06:46,050 --> 00:06:46,883
‫loan.

141
00:06:48,964 --> 00:06:50,490
‫And then remember how I said

142
00:06:50,490 --> 00:06:54,210
‫that the payout here will actually a bit more complicated.

143
00:06:54,210 --> 00:06:58,023
‫So that's why we left this part here for later.

144
00:07:00,180 --> 00:07:03,180
‫So now for the very first time as a payload,

145
00:07:03,180 --> 00:07:06,420
‫we will actually pass in another object.

146
00:07:06,420 --> 00:07:08,220
‫So we haven't done that before,

147
00:07:08,220 --> 00:07:11,880
‫but of course this is perfectly fine because with this

148
00:07:11,880 --> 00:07:16,110
‫we can then pass in basically multiple pieces of data.

149
00:07:16,110 --> 00:07:20,940
‫So let's say that we want an amount of a thousand Euros

150
00:07:20,940 --> 00:07:22,644
‫and then the purpose

151
00:07:22,644 --> 00:07:24,240
‫is

152
00:07:24,240 --> 00:07:25,830
‫to buy a car.

153
00:07:25,830 --> 00:07:28,800
‫And apparently a very cheap car.

154
00:07:28,800 --> 00:07:32,700
‫But let's just roll with this example.

155
00:07:32,700 --> 00:07:37,680
‫And so now here in this action, let's use that data.

156
00:07:37,680 --> 00:07:41,020
‫So here the loan is account dot payload dot

157
00:07:41,910 --> 00:07:43,140
‫amount,

158
00:07:43,140 --> 00:07:44,283
‫and the purpose,

159
00:07:46,080 --> 00:07:50,460
‫or actually I think it's called loan purpose,

160
00:07:50,460 --> 00:07:51,990
‫is

161
00:07:51,990 --> 00:07:53,671
‫action dot payload

162
00:07:53,671 --> 00:07:54,610
‫dot

163
00:07:56,190 --> 00:07:57,600
‫purpose.

164
00:07:57,600 --> 00:07:58,830
‫Let's see.

165
00:07:58,830 --> 00:08:00,450
‫Yeah.

166
00:08:00,450 --> 00:08:03,750
‫And so let's see what our store looks

167
00:08:03,750 --> 00:08:05,673
‫like after this operation.

168
00:08:07,170 --> 00:08:10,530
‫And indeed, we get our loan, we get our purpose

169
00:08:10,530 --> 00:08:14,730
‫but we also have to now add that loan to our balance.

170
00:08:14,730 --> 00:08:17,730
‫Cause of course, after we get the loan,

171
00:08:17,730 --> 00:08:20,433
‫then our balance goes up by that amount.

172
00:08:21,330 --> 00:08:23,950
‫And so let's also set a new balance

173
00:08:25,170 --> 00:08:28,230
‫which is gonna be the current balance.

174
00:08:28,230 --> 00:08:30,450
‫So state dot balance

175
00:08:30,450 --> 00:08:32,290
‫plus the action

176
00:08:33,600 --> 00:08:36,480
‫dot payload dot

177
00:08:36,480 --> 00:08:37,313
‫amount.

178
00:08:38,370 --> 00:08:39,720
‫And there we go.

179
00:08:39,720 --> 00:08:41,013
‫So that's correct.

180
00:08:44,070 --> 00:08:46,830
‫And now finally, just to experiment

181
00:08:46,830 --> 00:08:51,830
‫with this last one as well, let's then pay the loan back.

182
00:08:53,670 --> 00:08:55,930
‫So just to see that this event here

183
00:08:57,120 --> 00:08:59,880
‫actually has no payload at all.

184
00:08:59,880 --> 00:09:01,833
‫So pay loan.

185
00:09:05,010 --> 00:09:09,360
‫And so after that, we are basically back to before.

186
00:09:09,360 --> 00:09:11,760
‫So the balance went down again

187
00:09:11,760 --> 00:09:14,313
‫and here we are back to the beginning as well.

188
00:09:15,420 --> 00:09:18,270
‫So this actually works great,

189
00:09:18,270 --> 00:09:22,860
‫but let's add some more Redux conventions on top of this.

190
00:09:22,860 --> 00:09:24,480
‫So remember how I mentioned

191
00:09:24,480 --> 00:09:28,890
‫in the first lecture of this section, that usually in Redux

192
00:09:28,890 --> 00:09:33,120
‫we don't always manually write the type like this,

193
00:09:33,120 --> 00:09:36,090
‫but instead we create something called an action

194
00:09:36,090 --> 00:09:39,330
‫creator to automate this process.

195
00:09:39,330 --> 00:09:43,503
‫And so let's create those action creators in the next video.