1
00:00:02,260 --> 00:00:08,940
So we introduced action creators in the last lectures and you learned that they are especially useful when

2
00:00:08,940 --> 00:00:10,690
working with asynchronous code

3
00:00:10,870 --> 00:00:17,950
because together with redux-thunk, that middleware, we could basically find a place to execute our asynchronous

4
00:00:17,950 --> 00:00:25,870
code when dispatching an action and block that original dispatching to then just dispatch another action,

5
00:00:26,050 --> 00:00:27,640
all that handled by that

6
00:00:27,640 --> 00:00:29,160
redux-thunk middleware

7
00:00:29,260 --> 00:00:37,600
once our asynchronous task is done. Now with that, we got this new actions file which not only holds our

8
00:00:37,600 --> 00:00:38,960
action types,

9
00:00:39,040 --> 00:00:41,420
so the unique identifiers

10
00:00:41,470 --> 00:00:42,490
so to say

11
00:00:42,760 --> 00:00:50,170
but also all these creator functions which use these identifiers. Obviously our file here in the demo

12
00:00:50,170 --> 00:00:52,300
project isn't that big,

13
00:00:52,300 --> 00:00:58,690
we can of course simply stick to one file but we also split up the reducers into counter and result

14
00:00:59,260 --> 00:01:04,960
and you typically also do that for actions as your application grows and you're going to see that

15
00:01:04,980 --> 00:01:12,300
in the burger builder project. Therefore I'll create new files here, I'll create a counter.js file

16
00:01:12,700 --> 00:01:15,350
and I'll create a result.js file,

17
00:01:15,400 --> 00:01:22,450
so just like in the reducers folder, now for actions. I'll rename the actions file to action types

18
00:01:22,450 --> 00:01:28,680
because here, I now only want to export these unique identifiers, so that

19
00:01:28,690 --> 00:01:35,840
I have one file providing all the action types my application knows and theoretically, you could of course

20
00:01:35,860 --> 00:01:38,970
also split up into multiple files.

21
00:01:39,010 --> 00:01:43,250
Now I'll take my action creators and put them into their respective files

22
00:01:43,270 --> 00:01:49,630
so for the counter, I'll take the increment, decrement, add and subtract action creator, cut it from

23
00:01:49,630 --> 00:01:53,950
the action types file and put it into the counter file.

24
00:01:54,030 --> 00:02:00,160
Now of course, this reference to this constant won't work anymore because that constant now lives in

25
00:02:00,160 --> 00:02:01,590
a different file.

26
00:02:01,690 --> 00:02:10,360
So I should import that and I will import everything as action types from ./actionTypes which

27
00:02:10,360 --> 00:02:17,440
allows me to now set up my types by accessing action types and then the constants which we do export

28
00:02:17,530 --> 00:02:18,620
in that file.

29
00:02:18,760 --> 00:02:27,760
I'll do the same for decrement and of course also for add and subtract, like this,

30
00:02:27,970 --> 00:02:30,160
finally also for subtract.

31
00:02:30,490 --> 00:02:36,870
So that's the updated counter.js file with the action creators for the counter related actions,

32
00:02:36,940 --> 00:02:42,400
of course I'll do the same for the result, take my saveResult, storeResult and this deleteResult

33
00:02:42,400 --> 00:02:43,500
creator,

34
00:02:43,630 --> 00:02:46,650
so that also includes the asynchronous one

35
00:02:47,110 --> 00:02:54,630
and then I'll also import everything as action types from this action types file

36
00:02:54,880 --> 00:03:00,220
and with that, we can also use the action types we import to assign the right types here.

37
00:03:00,250 --> 00:03:06,460
So storeResult, in storeResult itself I just have my asynchronous code dispatching saveResult

38
00:03:06,460 --> 00:03:12,080
in the end and then deleteResult, I of course also want to dispatch deleteResult.

39
00:03:12,100 --> 00:03:18,670
So now I got my action creators outsourced, the action types file now only contains my action types and

40
00:03:18,670 --> 00:03:19,680
exports them,

41
00:03:19,780 --> 00:03:24,430
now I also want to have one file exporting all my action creators,

42
00:03:24,430 --> 00:03:31,090
so I'll create an index.js file here and in there, I'll actually use a syntax you might have not

43
00:03:31,090 --> 00:03:32,180
seen before,

44
00:03:32,410 --> 00:03:35,720
I'll just export something from a file.

45
00:03:35,740 --> 00:03:39,030
I can do that so I don't even import it in this file,

46
00:03:39,070 --> 00:03:41,820
I just have one file, the index.js file

47
00:03:41,950 --> 00:03:42,730
which groups

48
00:03:42,760 --> 00:03:49,330
all exports from separate files, so that in the end I can always point to that file to import something

49
00:03:49,420 --> 00:03:57,190
from any of the files I'll point to in that file here. So let me quickly do that, let's export something from the

50
00:03:57,190 --> 00:04:01,650
counter.js file and that something actually will be a list of everything

51
00:04:01,650 --> 00:04:07,840
this file does offer, like add, subtract, increment and decrement.

52
00:04:07,990 --> 00:04:14,740
And this really is just an advanced feature if someone wants to use such a set up of the project to handle

53
00:04:14,740 --> 00:04:19,160
a bigger project with lots and lots of actions and action creators of course,

54
00:04:19,210 --> 00:04:26,800
it's overkill for this demo project but it will make more sense later when we reach our burger builder

55
00:04:26,920 --> 00:04:29,510
and I want to teach you the concept right now already.

56
00:04:29,620 --> 00:04:37,640
So I'll also export something from the result file here that will be storeResult and it will be deleteResult,

57
00:04:37,730 --> 00:04:43,930
saveResult is not exported here though I could of course also export it but I'll never need it

58
00:04:43,930 --> 00:04:47,470
in any other file so I won't include it into my grouping.

59
00:04:47,470 --> 00:04:54,430
Now what this allows me to do is to later just import from index.js and actually import from any of

60
00:04:54,490 --> 00:04:58,940
these two files which I group in this index.js file.

61
00:04:58,960 --> 00:05:06,070
Now that's just a tiny improvement to make our files even a bit leaner, now what I also need to do is I need

62
00:05:06,070 --> 00:05:13,180
to adjust my reducer file where I do import these action types, so in counter.js where I import action

63
00:05:13,180 --> 00:05:21,700
types, that now lives in the actionTypes.js file in the actions folder, the same adjustment needs

64
00:05:21,700 --> 00:05:23,680
to be made in the result reducer,

65
00:05:23,680 --> 00:05:30,460
there I also now import from the action types file in the actions folder. And finally in the counter

66
00:05:30,460 --> 00:05:38,050
where I dispatch, here I refer to action creators and that now actually should point to the index.js

67
00:05:38,070 --> 00:05:38,510
file,

68
00:05:38,560 --> 00:05:46,660
so /index. Let's quickly restart npm start to see if it really has problems or just is stuck in

69
00:05:46,660 --> 00:05:48,450
the rebuild process,

70
00:05:48,490 --> 00:05:51,620
we do find an issue in the counter.js file,

71
00:05:52,030 --> 00:05:55,770
it doesn't like my imports here, action types,

72
00:05:56,020 --> 00:05:58,270
oh because I mistyped here it's actions,

73
00:05:58,390 --> 00:06:03,700
that's a typo in the file name, the file name should be action types.

74
00:06:03,700 --> 00:06:10,130
Now with the file name changed, I need to change all my imports in the other action files too,

75
00:06:10,420 --> 00:06:16,450
there I was referencing the wrong file, with all that adjusted to really point to actiontypes.js,

76
00:06:16,510 --> 00:06:24,070
we should have a working application again just as before with asynchronous storage available.

77
00:06:24,310 --> 00:06:31,810
Now however with a bit more split up action creators over multiple files, as I said for this demo project

78
00:06:32,020 --> 00:06:37,450
overkill but definitely something you should keep in mind for bigger projects because what it allows

79
00:06:37,450 --> 00:06:44,350
you is that you have files with only a few action creators in each file which makes it easier to find

80
00:06:44,410 --> 00:06:47,750
that action creator you want it to change or check.

81
00:06:48,070 --> 00:06:53,760
So this is why I chose that setup and it is something I wanted to show you for your bigger projects.