Unless sexual input are to reducers together inside of our reducers index file I'm now going to import
the redux library into this file and wire up these reducers to each other that combine reducers function.
So at the very top I'll do import really braces combine reducers Ramah redux.
Notice this is an example of a named export.
So I'm making use of the curly braces here.
Now I'm sure you might be curious how do we know when to use the curly braces and when not to.
If we are importing code from some other library the only answer I have for you is that you need to
look at the documentation for that library when you are importing code from your own files.
You will always know by looking at the file contents if you are doing a named X for it or a default
export and thus whether to include or not include the curly braces.
So anytime you're making use of some outside library you have to look at the documentation and be told
whether or not you need those curly braces.
So now at the bottom of the file I'm going to make use of that combine reducers function.
I'll say combine reducers I'll pass it an object and remember the keys of this object are going to be
the keys that show up inside of our state object.
So I'm going to assign a key of songs to this thing and that's going to get my songs reducer.
I'll say songs.
And then I'm also going to give it a selected song key and that's going to get my selected song reducer.
Salek did a song reduce her like so.
And then finally I'm going to do an export default in front of that thing.
So now any other file and some my project can get access to our combined set of reducers.
All right so believe it or not that is pretty much it for the strictly redux side of things.
We've got our reducers put together and we've got our action creator singular put together.
So from here on out it's really just react and react redux.
That's it.
That's the only code we have to write from this point on.
So I'm going to close down all the files I currently have open and then I'm going to open up the index
such as file inside of my sarcy directory.
Remember this is the one where we had imported the app component and then tried to show it on the screen.
So we're now going to add a little bit more configuration to this thing than what's currently in here.
Our goal is to make sure that we get that provider tag at the very top of our component hierarchy and
we need to make sure that we also pass it a reference to our redux store that gets all of our reducers
loaded up into it.
So back inside if you're going to import a couple of different files.
First off I'm going to import a provider components from re-act redux like so.
So this right here.
Yup that's the provider we've been talking about.
This is technically a component right here to say component that is made up by the re-act redux library.
Notice how this is also a named export and that I named it with a capital P because it is a component
and by convention we'd label component variable names as capitals.
Next up I'm going to also import the create store function rom redux.
This is the same function that you saw a little bit ago over on that code Penn. example we had passed
create store our set of reducers and returned back to us.
A redux store that contained all of our users and all of our applications data were state.
And then finally underneath my app I'm going to import might reducers from the reducers directory like
so.
Now here's a great example of this how we've got two named experts right here and then everything else
inside the file are unnamed or default.
So no curly braces required.
So again don't just kind of add in willy nilly curly braces sometimes and not curly braces other times.
Really think about what you are trying to import.
Now the other thing I want to mention here is you will notice that I grouped together all of my imports
from outside third party dependencies and then I also grouped together all of my own code underneath
it.
I don't really need the space here.
Sometimes you'll see people put a space in.
I do sometimes I do so I don't sometimes it doesn't really make a big difference.
OK.
Now the last thing I'd do is create an instance of the provider and wrap it.
Our app component with it.
So to do so I'm going to do myself a little bit of space here.
And then I'm going to wrap the app with a provider and I'm going to fix up that comma.
Make sure it's at the end of provider like so that's better.
And then I'm going to pass the provider component a single prop called store.
The store is going to be the result of calling create store and passing in our reducers.
So a call create store and I'll pass in our reducers like so.
So back on our Copen example you and I got a reference to the object that was created by create store
and then we played around with it a little bit.
But when we make use of the re-act redux library we don't usually mess around with the store directly.
Instead we pass it off to this provider and the provider essentially takes care of everything from there.
So in a typical redux application you're actually very rarely going to interact directly with the store
outside of some more advanced cases that we'll see later on.
OK.
So that's it.
We've now wired up our provider and now any component inside of our component hierarchy can implement
this or make use of this connecting right here.
And remember the purpose of the connect component is to somehow communicate with the provider that we
just put together and thus communicate with all the data inside of our store.
So let's take a pause right here.
When we come back the next section we're going to continue working on the redux side of our application
by putting together our song list component to a quick break and I'll see you in just a minute.