1
00:00:02,200 --> 00:00:08,140
I mentioned in the last lecture that action creators can help us, for that I'll create a new subfolder

2
00:00:08,140 --> 00:00:09,250
in the store folder,

3
00:00:09,370 --> 00:00:14,160
I'll name it actions and I move my actions in there,

4
00:00:14,250 --> 00:00:16,120
I'll leave the file as it is for now.

5
00:00:16,240 --> 00:00:22,820
I move that into the actions folder because we'll also add multiple action files over the next lectures

6
00:00:22,840 --> 00:00:25,500
but for now, let's stick this one. In there,

7
00:00:25,510 --> 00:00:30,920
we export all our action identifiers and that is working fine.

8
00:00:30,970 --> 00:00:36,160
Now I want to introduce a new way of creating actions, so-called action creators,

9
00:00:36,160 --> 00:00:40,060
how does that look like? What is that? An action creator

10
00:00:40,120 --> 00:00:46,190
is just a function which returns an action or which creates an action, hence the name.

11
00:00:46,570 --> 00:00:52,060
We right now create our actions hardcoded in our code or simply when we need them

12
00:00:52,060 --> 00:00:54,940
I should say, in the counter component. Here

13
00:00:55,000 --> 00:00:58,080
on mapDispatchToProps, the actions,

14
00:00:58,120 --> 00:01:00,640
these are just these javascript objects, right?

15
00:01:00,670 --> 00:01:07,310
We create them here, we create them by simply writing the code for the object into our dispatch function.

16
00:01:07,600 --> 00:01:14,020
An action creator would return such an object and you can see the benefit when we talk about asynchronous

17
00:01:14,020 --> 00:01:14,630
code.

18
00:01:14,740 --> 00:01:17,660
So let's create an action creator right now

19
00:01:17,710 --> 00:01:23,280
for synchronous code though. For that, I'll create a new function and you can use the function keyword

20
00:01:23,340 --> 00:01:28,090
or create an arrow function and I'll name it increment,

21
00:01:28,120 --> 00:01:31,700
the convention is to use the same name as your identifier

22
00:01:31,780 --> 00:01:39,870
but in camel case, so lowercase character first. Increment is an arrow function as I said,

23
00:01:39,970 --> 00:01:44,950
it will return something eventually and it will receive something, it can receive something I should

24
00:01:44,950 --> 00:01:51,160
say, it receives any payloads you want to pass with that action. Here for increment,

25
00:01:51,160 --> 00:01:52,540
I don't want to pass any,

26
00:01:52,600 --> 00:01:58,200
so instead I just return something and that something is the actions or javascript object.

27
00:01:58,250 --> 00:02:03,660
Now as any action, it has to have a type and the type should be increment,

28
00:02:03,850 --> 00:02:08,150
referring to our identifier. Previously, I did this in the counter.js

29
00:02:08,170 --> 00:02:14,610
file here, increment which I imported from action types by reaching out that actions file.

30
00:02:14,720 --> 00:02:22,390
Now I actually can't get rid of that import and we will have to change what we dispatch here soon.

31
00:02:22,390 --> 00:02:24,830
For now let's go back to the actions.js file,

32
00:02:24,900 --> 00:02:27,590
this is our first action creator already,

33
00:02:27,670 --> 00:02:28,660
it returns,

34
00:02:28,720 --> 00:02:34,150
it creates therefore an action and an action just needs to have a type, so that's the bare minimum action

35
00:02:34,150 --> 00:02:35,840
we can create.

36
00:02:35,920 --> 00:02:41,980
We can use this action creator now in the counter.js file where we do dispatch it by first of

37
00:02:41,980 --> 00:02:43,200
all importing it.

38
00:02:43,480 --> 00:02:48,590
So here I'll import something from this actions file,

39
00:02:48,700 --> 00:02:55,540
so I'll navigate up to the store folder into actions and there to the actions.js file. Now in there,

40
00:02:55,790 --> 00:02:57,210
I need to go back to it,

41
00:02:57,220 --> 00:03:00,560
I need to export this increment function.

42
00:03:00,610 --> 00:03:02,420
Now I can import it by name

43
00:03:02,470 --> 00:03:08,700
so in the counter.js file, I can import increment and keep in mind, this is a function.

44
00:03:08,830 --> 00:03:11,820
Now we can use that function in the counter.js file

45
00:03:11,890 --> 00:03:18,390
at the bottom where we map our props to dispatch functions. For increment

46
00:03:18,570 --> 00:03:26,240
here, I will now simply pass increment like that and also execute it

47
00:03:26,460 --> 00:03:33,000
because once I execute increment and this will happen when this prop is basically executed, when I execute

48
00:03:33,000 --> 00:03:33,840
increment,

49
00:03:34,140 --> 00:03:40,260
this will give me an action because it's an action creator, don't forget that, increment returns us

50
00:03:40,260 --> 00:03:40,840
an action,

51
00:03:40,860 --> 00:03:43,390
so we execute it, we get an action.

52
00:03:43,570 --> 00:03:44,460
Now that's very nice,

53
00:03:44,460 --> 00:03:49,250
our application is still broke though because all the other actions here are not connected.

54
00:03:49,470 --> 00:03:55,560
So what I'll quickly do is I'll create more action creators for all the actions or to be precise,

55
00:03:55,620 --> 00:03:56,760
you should do this.

56
00:03:56,760 --> 00:03:58,290
So here is your challenge,

57
00:03:58,290 --> 00:04:05,070
create action creators like this one for all the actions and see if you can figure out how to handle

58
00:04:05,070 --> 00:04:07,280
the actions which actually need a payload.

59
00:04:07,410 --> 00:04:09,390
We'll do it together in the next video.