1
00:00:01,000 --> 00:00:05,070
In the last section we started talking about how the re-act redux library works.

2
00:00:05,100 --> 00:00:07,510
Now it's time to actually start implementing all this stuff.

3
00:00:07,560 --> 00:00:11,570
So we're going to move over to our code editor and start writing out a bunch of code.

4
00:00:11,910 --> 00:00:14,220
But first one quick thing on mention here.

5
00:00:14,220 --> 00:00:18,720
How are we going to organize all these different files and folders inside of our project directory because

6
00:00:18,720 --> 00:00:22,100
we now have to write a ton of code to handle the redux side of things.

7
00:00:22,110 --> 00:00:28,230
In addition to the react side of things so we're going to add all of our code still to the SIRC directory

8
00:00:28,950 --> 00:00:35,370
we're going to create a actions folder inside of their actions folder is going to handle or contain

9
00:00:35,400 --> 00:00:39,290
a bunch different files related to action creators inside of our application.

10
00:00:39,560 --> 00:00:42,950
The components folder is still going to handle all of our different components.

11
00:00:43,080 --> 00:00:48,000
And then we're also going to have a reducers directory as well and the reducers directory as you might

12
00:00:48,000 --> 00:00:52,560
imagine is going to contain all the files related to our reducers.

13
00:00:52,560 --> 00:00:58,620
And now the index yes is going to set up not only the re-act side of our project but also the redux

14
00:00:58,620 --> 00:01:00,180
side as well.

15
00:01:00,180 --> 00:01:05,730
So that is why in the last application we worked on we saw that we started moving our app component

16
00:01:05,760 --> 00:01:11,280
into the components directory because now our index dodgiest file is going to have similar configuration

17
00:01:11,280 --> 00:01:16,020
inside of it and so it would have gone a little bit crowded if we continued to create our app component

18
00:01:16,020 --> 00:01:17,430
inside of your.

19
00:01:17,460 --> 00:01:17,700
All right.

20
00:01:17,700 --> 00:01:18,900
So let's get to it.

21
00:01:18,900 --> 00:01:24,890
We're going to create our actions directory and the reducers directory as well.

22
00:01:25,760 --> 00:01:32,760
So inside the Cercy folder I'm going to make a new folder called actions and then I'm also going to

23
00:01:32,760 --> 00:01:35,760
make a new folder called reducers.

24
00:01:35,880 --> 00:01:40,920
Then inside the actions directory I'm going to make a new file that is going to How's the single action

25
00:01:40,920 --> 00:01:45,010
Krater that we're going to have the select song action creator.

26
00:01:45,030 --> 00:01:49,430
So inside there I want to add in a new file called index Geass.

27
00:01:49,920 --> 00:01:53,560
Now my choice of file name right there might be a little bit surprising to you.

28
00:01:53,580 --> 00:01:56,920
We already have a index J.S. file inside of our project.

29
00:01:56,920 --> 00:01:59,370
It's inside of our root directory.

30
00:01:59,610 --> 00:02:04,890
Well unfortunately this is a pattern that you're going to see in the vast majority of Riak projects.

31
00:02:04,920 --> 00:02:10,310
Let me tell you why eventually we are going to write some code into this file and then we're going to

32
00:02:10,310 --> 00:02:13,880
want to import it from somewhere else inside of our project.

33
00:02:13,880 --> 00:02:17,020
So I'm going to change over to my app component right here.

34
00:02:17,120 --> 00:02:22,190
And let's just imagine that we want to import the actions indexed not just file.

35
00:02:22,190 --> 00:02:23,020
We don't need to.

36
00:02:23,030 --> 00:02:25,210
I just want to show you how we would do it.

37
00:02:25,250 --> 00:02:27,020
So at the top we would do something like.

38
00:02:27,020 --> 00:02:36,240
Import actions from up one directory and then we could write actions index like so that is an option

39
00:02:36,920 --> 00:02:38,600
but there's a little catch.

40
00:02:38,600 --> 00:02:44,570
There's a little shortcut if we want to because this file is specifically named indexed.

41
00:02:44,650 --> 00:02:53,620
Yes we could shorten the import path right here to just actions like so if you did not specify a file

42
00:02:53,860 --> 00:02:58,030
then well-packed remember that is the dependency or the tool that is joining all of our different files

43
00:02:58,030 --> 00:02:58,840
together.

44
00:02:58,840 --> 00:03:00,260
If you don't specials.

45
00:03:00,400 --> 00:03:06,310
If you don't specify a file on there if you only specify a directory where Pak is going to automatically

46
00:03:06,310 --> 00:03:08,790
give you the index file.

47
00:03:08,980 --> 00:03:15,050
And so when we create a index J.S. file inside of some directory it's really just a shortcut.

48
00:03:15,130 --> 00:03:18,560
We could just as well call that file action creators or something like that.

49
00:03:18,670 --> 00:03:24,040
But again we usually end up calling the root file and side of actions and reducers as you're going to

50
00:03:24,040 --> 00:03:27,140
see very quickly the index file.

51
00:03:27,190 --> 00:03:31,150
Now I know that's probably going to get really complicated very quickly because we're going to have

52
00:03:31,510 --> 00:03:35,400
three different index G-S files inside of our project.

53
00:03:35,410 --> 00:03:40,510
Whenever you're watching me write code you can always see the index file that I'm working on by looking

54
00:03:40,510 --> 00:03:41,520
at the tab up here.

55
00:03:41,530 --> 00:03:44,020
Notice how it says actions.

56
00:03:44,020 --> 00:03:49,430
In addition you can also look at the highlighted file over here on the left hand side on my file pane.

57
00:03:49,510 --> 00:03:54,420
So hopefully between those two you can get a better idea of what file I'm working on at any given time.

58
00:03:55,590 --> 00:03:55,790
All right.

59
00:03:55,800 --> 00:03:57,950
So I'm going to clean up this imports table right here.

60
00:03:58,110 --> 00:03:59,030
Let's take a quick pause.

61
00:03:59,040 --> 00:04:03,390
When I come back the next section we're going to start building out our action creator inside of the

62
00:04:03,390 --> 00:04:04,680
actions index.

63
00:04:04,730 --> 00:04:05,100
Yes.

64
00:04:05,100 --> 00:04:05,600
File.