1
00:00:01,110 --> 00:00:02,970
‫So as I just said,

2
00:00:02,970 --> 00:00:06,723
‫now it's time to build our action creator functions.

3
00:00:08,130 --> 00:00:11,640
‫So basically, action creators are nothing more

4
00:00:11,640 --> 00:00:15,210
‫than simply functions, that return actions.

5
00:00:15,210 --> 00:00:18,120
‫So they are really not a Redux thing,

6
00:00:18,120 --> 00:00:21,810
‫and Redux would work perfectly fine without them,

7
00:00:21,810 --> 00:00:24,150
‫but they are a useful convention

8
00:00:24,150 --> 00:00:28,980
‫that Redux developers have used forever, basically.

9
00:00:28,980 --> 00:00:31,980
‫So Redux would work without action creators

10
00:00:31,980 --> 00:00:35,313
‫but since it's a convention, let's now create some.

11
00:00:36,630 --> 00:00:39,990
‫So basically we are going to create one action creator

12
00:00:39,990 --> 00:00:42,390
‫for each possible action.

13
00:00:42,390 --> 00:00:45,627
‫So let's call one "deposit".

14
00:00:47,520 --> 00:00:48,783
‫Let's duplicate this.

15
00:00:49,800 --> 00:00:53,277
‫One is "withdraw".

16
00:00:55,350 --> 00:00:58,770
‫One is "request loan"

17
00:00:58,770 --> 00:01:02,247
‫and the other one is "payLoan".

18
00:01:03,390 --> 00:01:04,353
‫All right.

19
00:01:05,490 --> 00:01:09,270
‫So again, these functions all they do

20
00:01:09,270 --> 00:01:12,030
‫is to return actions.

21
00:01:12,030 --> 00:01:15,360
‫And an action is basically just this object.

22
00:01:15,360 --> 00:01:17,403
‫So let's copy this one,

23
00:01:18,720 --> 00:01:20,820
‫then return it.

24
00:01:20,820 --> 00:01:24,120
‫But of course we now need to customize this value here.

25
00:01:24,120 --> 00:01:27,573
‫And so this is gonna be the input of this function.

26
00:01:28,410 --> 00:01:31,047
‫So let's call this the "amount",

27
00:01:32,430 --> 00:01:35,487
‫and then here we replace that with the "amount".

28
00:01:36,480 --> 00:01:41,163
‫So let's comment out all of this right here,

29
00:01:42,300 --> 00:01:45,330
‫so that we can basically recreate the same thing

30
00:01:45,330 --> 00:01:48,783
‫but with our new action creators.

31
00:01:50,160 --> 00:01:52,080
‫So the way it works now

32
00:01:52,080 --> 00:01:57,080
‫is that we still of course call "store.dispatch," like this.

33
00:01:58,470 --> 00:01:59,303
‫But in here,

34
00:01:59,303 --> 00:02:01,170
‫instead of writing the event

35
00:02:01,170 --> 00:02:05,403
‫we just call the "deposit" function with our amount.

36
00:02:07,410 --> 00:02:12,090
‫And then "store.getST" is what we want to log

37
00:02:14,070 --> 00:02:15,093
‫to the console.

38
00:02:18,060 --> 00:02:22,233
‫And yeah, we have the exact same result as before.

39
00:02:23,670 --> 00:02:28,293
‫Okay, and so let's now copy this here.

40
00:02:29,250 --> 00:02:32,733
‫And here it is now "withdraw"

41
00:02:34,200 --> 00:02:36,903
‫and it also needs an amount.

42
00:02:39,840 --> 00:02:41,493
‫Try this one as well.

43
00:02:43,710 --> 00:02:45,123
‫Maybe 200 again,

44
00:02:46,950 --> 00:02:48,480
‫and nice.

45
00:02:48,480 --> 00:02:51,870
‫So I think that this actually looks a lot nicer,

46
00:02:51,870 --> 00:02:54,900
‫and it is especially a lot more reusable

47
00:02:54,900 --> 00:02:59,100
‫than always writing the object here by hand.

48
00:02:59,100 --> 00:03:01,710
‫So that might create a problem

49
00:03:01,710 --> 00:03:05,280
‫that we write something wrong here, so maybe a typo,

50
00:03:05,280 --> 00:03:08,460
‫or maybe we don't remember the right string.

51
00:03:08,460 --> 00:03:10,953
‫And so then that can introduce bugs.

52
00:03:12,810 --> 00:03:15,750
‫All right , right now of course you could create

53
00:03:15,750 --> 00:03:19,410
‫the same convention, so this exact same pattern

54
00:03:19,410 --> 00:03:21,633
‫also with use reducer.

55
00:03:23,640 --> 00:03:27,243
‫So that would be pretty easy to do, right?

56
00:03:29,370 --> 00:03:33,990
‫So here again, let's copy what we had before.

57
00:03:33,990 --> 00:03:37,113
‫And then here we need to specify the "amount"

58
00:03:38,880 --> 00:03:43,880
‫and the "purpose" when we call this action creator.

59
00:03:44,430 --> 00:03:47,823
‫So here we can simply erase this.

60
00:03:48,810 --> 00:03:52,653
‫And so, let's do that.

61
00:03:55,633 --> 00:03:57,050
‫So "requestLoan."

62
00:03:58,650 --> 00:04:03,650
‫And again, we're going to request 1000 to "Buy a cheap car."

63
00:04:06,000 --> 00:04:10,913
‫And then let's log it again to the console. Nice.

64
00:04:13,020 --> 00:04:14,553
‫And now just one more.

65
00:04:15,840 --> 00:04:17,370
‫So "return".

66
00:04:17,370 --> 00:04:21,510
‫And this one of course doesn't even need any input,

67
00:04:21,510 --> 00:04:25,470
‫because here all we need to do is to create this object

68
00:04:25,470 --> 00:04:28,647
‫with the type of "account payLoan".

69
00:04:32,374 --> 00:04:35,773
‫So "store.dispatch," and then "payLoan."

70
00:04:39,810 --> 00:04:43,980
‫And let's see, and nothing happened.

71
00:04:43,980 --> 00:04:47,875
‫So we get exactly the same state as before.

72
00:04:47,875 --> 00:04:51,420
‫And I see, so here we have a typo.

73
00:04:51,420 --> 00:04:53,880
‫So this is exactly the kind of typo

74
00:04:53,880 --> 00:04:55,230
‫that I mentioned earlier.

75
00:04:55,230 --> 00:04:57,120
‫That can always happen.

76
00:04:57,120 --> 00:04:59,220
‫And so now it is correct.

77
00:04:59,220 --> 00:05:01,620
‫Okay. And that's all there is to know

78
00:05:01,620 --> 00:05:05,310
‫about building action creator functions.

79
00:05:05,310 --> 00:05:08,220
‫Now, back in the day, React developers

80
00:05:08,220 --> 00:05:12,330
‫also used to place these strings here

81
00:05:12,330 --> 00:05:16,200
‫into separate variables into a separate file.

82
00:05:16,200 --> 00:05:20,140
‫So for example, we could have one variable

83
00:05:23,040 --> 00:05:27,900
‫called "ACCOUNT DEPOSIT,"

84
00:05:27,900 --> 00:05:31,683
‫which would then contain this string right here.

85
00:05:32,940 --> 00:05:34,953
‫And then we place that right there.

86
00:05:37,200 --> 00:05:40,140
‫And also here.

87
00:05:40,140 --> 00:05:42,270
‫And so then we would also have

88
00:05:42,270 --> 00:05:45,900
‫the action name string here in one central place

89
00:05:45,900 --> 00:05:48,813
‫without having to manually write it twice.

90
00:05:50,100 --> 00:05:53,790
‫So that is also something that you will see

91
00:05:53,790 --> 00:05:55,410
‫in older code bases.

92
00:05:55,410 --> 00:05:57,090
‫And so that's why it's important

93
00:05:57,090 --> 00:05:59,523
‫that you are aware that this exists.

94
00:06:00,660 --> 00:06:05,580
‫However, in more modern React, that is no longer being used.

95
00:06:05,580 --> 00:06:09,693
‫And so we will just go back to the way that we had earlier.

96
00:06:11,100 --> 00:06:14,220
‫But again, if you work with an older code base

97
00:06:14,220 --> 00:06:16,290
‫and you see something like this,

98
00:06:16,290 --> 00:06:19,181
‫then you already know what that means.

99
00:06:19,181 --> 00:06:20,310
‫Okay.

100
00:06:20,310 --> 00:06:22,680
‫And with this, we finish this part

101
00:06:22,680 --> 00:06:25,893
‫and next we will add some more state here.