1
00:00:00,970 --> 00:00:05,680
In the last section we created our action creators file inside the actions directory.

2
00:00:05,700 --> 00:00:10,920
So now we're going to start creating our first action creator right back over here.

3
00:00:10,920 --> 00:00:15,450
Remember we had said that we probably want to have an action creator called something like select song.

4
00:00:15,820 --> 00:00:21,820
So back over here I'm going to say Konst select song that's going to be the name of my action creator.

5
00:00:21,820 --> 00:00:27,700
I'm going to make it an arrow function and then remember this needs to return a plain javascript object

6
00:00:28,200 --> 00:00:31,310
just as a quick reminder I'll put some comments on here for myself.

7
00:00:31,340 --> 00:00:40,050
I'll remind myself that this is my action creator and inside of it we are going to return an action.

8
00:00:40,090 --> 00:00:46,100
Now remember the rules of javascript are me redux actions we must have a type property and we can optionally

9
00:00:46,100 --> 00:00:47,670
have a payload as well.

10
00:00:47,810 --> 00:00:52,760
When we were going over that example inside of Copen I'd said several times that we have to have a payload.

11
00:00:52,790 --> 00:00:55,980
We don't actually have to have a payload property on any action.

12
00:00:56,030 --> 00:00:59,930
It is technically optional but a type is required.

13
00:00:59,930 --> 00:01:09,870
So I'm going to add in type of song selected like the now in this case we are going to have a payload

14
00:01:10,410 --> 00:01:14,780
because we want to specify exactly what song we are trying to select.

15
00:01:14,970 --> 00:01:18,750
So I'm going to assume that we're going to pass in the song that we're trying to select as an argument

16
00:01:18,750 --> 00:01:20,000
to the actual creator.

17
00:01:20,130 --> 00:01:26,570
And so all reflect that as an argument called Song and then all assign that to my payload like so and

18
00:01:26,580 --> 00:01:29,880
that's it that's all we need for our single action creator.

19
00:01:29,880 --> 00:01:35,010
It's not the last thing we do is make sure that we export this action creator from this file up to this

20
00:01:35,010 --> 00:01:35,910
point in this course.

21
00:01:35,910 --> 00:01:41,400
We've been exporting everything using the export default statement so we've been writing out stuff like

22
00:01:41,880 --> 00:01:48,750
export default select song like so but you're going to very quickly see that as we start to write multiple

23
00:01:48,750 --> 00:01:54,180
action creators inside this file we might want to export multiple different functions.

24
00:01:54,410 --> 00:02:01,200
So rather than creating a default export we're going to instead create a named export a named export

25
00:02:01,260 --> 00:02:05,970
allows us to export many different functions from a single file to do so.

26
00:02:06,000 --> 00:02:10,420
All we have to do is place the export keyword right in front of that function declaration.

27
00:02:11,890 --> 00:02:13,770
All right so now we can save this.

28
00:02:13,810 --> 00:02:19,060
Now I want to very quickly give you an example of how we would import this select song action creator

29
00:02:19,060 --> 00:02:20,750
into another file.

30
00:02:20,830 --> 00:02:27,360
So again going back over to my apt J.S. file at the top to import that I would write out.

31
00:02:27,380 --> 00:02:35,590
Import curly braces and then select song like so and then I would say from dot dot slash so up one directory

32
00:02:36,250 --> 00:02:39,710
the actions folder to the curly braces right here.

33
00:02:39,720 --> 00:02:45,610
Specifically mean that we want to import a named export from this file.

34
00:02:45,610 --> 00:02:52,060
If we had a export default in here instead like export defaults select song then we would not need those

35
00:02:52,060 --> 00:02:55,240
curly braces and we would take them off like so.

36
00:02:55,240 --> 00:02:59,440
Now one thing that I've found is that when you're first getting started with import and export statements

37
00:02:59,590 --> 00:03:04,980
it's incredibly common to just kind of like guess whether you need the curly braces or not.

38
00:03:05,020 --> 00:03:10,690
So I encourage you don't guess don't just randomly put on curly braces and if you have a bunch of other

39
00:03:10,690 --> 00:03:15,390
import statements inside of your don't just do what you had done on the others.

40
00:03:15,440 --> 00:03:18,040
Instead think about what you are trying to import here.

41
00:03:18,050 --> 00:03:20,840
Is it a named export or a default.

42
00:03:20,840 --> 00:03:23,770
If it is a default no need for the curly braces.

43
00:03:23,930 --> 00:03:26,960
If it's names you need the curly braces.

44
00:03:27,090 --> 00:03:27,900
All right.

45
00:03:27,900 --> 00:03:32,040
So I'm going to remove that import statement because in this case we don't need it and then I'm going

46
00:03:32,040 --> 00:03:35,340
to save my index such as file here.

47
00:03:35,340 --> 00:03:37,490
After removing that export at the bottom.

48
00:03:37,860 --> 00:03:38,580
OK so that's it.

49
00:03:38,580 --> 00:03:44,640
That's our final file for the actions index dodgiest file those take a quick pause here.

50
00:03:44,730 --> 00:03:48,660
When we come back the next section we're going to start working on our reducers as well.

51
00:03:48,840 --> 00:03:50,330
So I'll see you in just a minute.