In the last section we started talking about how the re-act redux library works.
Now it's time to actually start implementing all this stuff.
So we're going to move over to our code editor and start writing out a bunch of code.
But first one quick thing on mention here.
How are we going to organize all these different files and folders inside of our project directory because
we now have to write a ton of code to handle the redux side of things.
In addition to the react side of things so we're going to add all of our code still to the SIRC directory
we're going to create a actions folder inside of their actions folder is going to handle or contain
a bunch different files related to action creators inside of our application.
The components folder is still going to handle all of our different components.
And then we're also going to have a reducers directory as well and the reducers directory as you might
imagine is going to contain all the files related to our reducers.
And now the index yes is going to set up not only the re-act side of our project but also the redux
side as well.
So that is why in the last application we worked on we saw that we started moving our app component
into the components directory because now our index dodgiest file is going to have similar configuration
inside of it and so it would have gone a little bit crowded if we continued to create our app component
inside of your.
All right.
So let's get to it.
We're going to create our actions directory and the reducers directory as well.
So inside the Cercy folder I'm going to make a new folder called actions and then I'm also going to
make a new folder called reducers.
Then inside the actions directory I'm going to make a new file that is going to How's the single action
Krater that we're going to have the select song action creator.
So inside there I want to add in a new file called index Geass.
Now my choice of file name right there might be a little bit surprising to you.
We already have a index J.S. file inside of our project.
It's inside of our root directory.
Well unfortunately this is a pattern that you're going to see in the vast majority of Riak projects.
Let me tell you why eventually we are going to write some code into this file and then we're going to
want to import it from somewhere else inside of our project.
So I'm going to change over to my app component right here.
And let's just imagine that we want to import the actions indexed not just file.
We don't need to.
I just want to show you how we would do it.
So at the top we would do something like.
Import actions from up one directory and then we could write actions index like so that is an option
but there's a little catch.
There's a little shortcut if we want to because this file is specifically named indexed.
Yes we could shorten the import path right here to just actions like so if you did not specify a file
then well-packed remember that is the dependency or the tool that is joining all of our different files
together.
If you don't specials.
If you don't specify a file on there if you only specify a directory where Pak is going to automatically
give you the index file.
And so when we create a index J.S. file inside of some directory it's really just a shortcut.
We could just as well call that file action creators or something like that.
But again we usually end up calling the root file and side of actions and reducers as you're going to
see very quickly the index file.
Now I know that's probably going to get really complicated very quickly because we're going to have
three different index G-S files inside of our project.
Whenever you're watching me write code you can always see the index file that I'm working on by looking
at the tab up here.
Notice how it says actions.
In addition you can also look at the highlighted file over here on the left hand side on my file pane.
So hopefully between those two you can get a better idea of what file I'm working on at any given time.
All right.
So I'm going to clean up this imports table right here.
Let's take a quick pause.
When I come back the next section we're going to start building out our action creator inside of the
actions index.
Yes.
File.