In this video we're going to start installing redux and setting it up inside of our project so we can
eventually get some action creators and to reduce or to reflect whether or not these are signed in once
we reflect the authentications state of the user inside of a redux story.
It's going to make building the rest of our application a lot easier.
OK.
So to get started we're going to flip on over to our terminal.
We're going to stop my running server and we're going to install a couple of dependencies here still
doing NPM install dash dash save.
And we're going to get Rydex and re-act dash redux as well.
OK.
So I'm going to let those install while that goes.
All flip back over to my code editor now.
Right now I'm going to close the Google off file.
I still have this file right here with my client ID.
I'm going to close this down.
I'm not going to save that file because we already copied the client id over to our component and then
I'll close down my jazz file as well.
All right so now I'm going to pull open my folder Explorer over here and we're going to create some
of the files and folders that are typical of a re-act redux application.
So I'm going to create a new folder inside my SIRC directory called actions inside there or make a action
creator file called index.
Yes.
So this is going to eventually have all of our action creators inside of it.
Next up I'm going to create a new folder inside the S R C directory called reducers.
And as usual I'll make a new file inside they're called index not us.
Inside the reducers index file I'm going to import combine reducers
rhumb redux and then I will export default to combine reducers with an object.
And as the last epic application or as in the last application we're going to put a dummy reducer inside
of here just to get our redux application working.
So I'll say something like replace me.
And that's going to be a function that always returns a value of 5 or 10 or some string whatever you
want it to be.
Again this is just to get redux working.
You don't have to do this at all if you try to start up your application without one reduce or you're
going to very quickly see an error message that says hey I need a reducer.
All right.
That looks good.
So I to close that reducers index such as file and the actions indexed Achebe's file.
And then finally I'm going to find my SIRC directory and open up the root index file where we initially
create our app component and render it onto the screen.
All right.
So inside of here will be that bad it's just going to be all the stuff we've usually done at the top.
We're going to import the provider element from re-act redux.
We're going to get reate store from redox
next to our app import.
I'm going to also get our producers.
And then finally we will create our store right here on line 9 and then set up our provider inside the
re-act Dom rende recall.
So I'll say con story is going to be create store and I'll pass in my reducers and then I'll get myself
a little bit of space here with the react on Dot render call
and I'm going to wrap that app component with a provider that gets the store as a prop
and don't forget to get the comma in here.
That's a really easy thing to miss.
Make sure you got a comma on the right hand side of the closing provider element OK.
So I think this looks pretty good right here.
So I'm going to save this and then I'll flip back over and we're just going to make sure that our application
is still successfully it starts up.
Oh I forgot.
We stopped our development server.
I'm gonna flip back over to my terminal.
It looks like those packages for successfully installed Soldan NPM starts.
And I'll just wait a second for the development server to startup.
All right so there we go.
And I see everything start up successfully.
All right this looks fantastic.
Let's take a quick pause right here.
When we come back in the next section we're going to start working on some action creators and some
authentication reducer as well.
So quick pause and I'll see you in just a minute.