In less sexually defined a connect function inside of our song list component.
So remember this connecting right here even though it doesn't really look like it is actually a re-act
component.
It's a reaction upon it that we're going to pass some configuration to.
We're going to specifically tell this connecting that we want to get a list of songs out of our redux
store from the provider.
So anytime that our list of songs and side of our store changes that provider is going to automatically
notify our connect function right here and the connect function is then going to pass our list of songs
down to our song list component.
So let's now figure out how we can configure this connect function or connect component and tell it
that we want to get some specific data out of our redux store.
All right so to do so we're going to come back over here and I'm going to define a function right above
our export default statement.
Now by convention this is Convention we normally call this function the map state to prop's function
so now this can be an arrow function.
It could be a function keyword.
You will see it defined both ways map state to prop's.
So this is a very crazy little function name.
But if you really kind of read it it will eventually start to make a little bit more sense.
This is saying that we're going to take our state object essentially all of the data that's inside of
our redux store and we're going to run some calculation on it or some computation that's going to cause
that data to eventually show up as props inside of our component.
So that's the meaning of map state to process this function does not have to be called Map state to
prop's we could just as easily call it get my states like so we can call it anything we want but by
convention you're usually going to see this defined as something called Map state to prop's this map
state to prop's function is going to be called with all of the state inside of a redux store.
So that state right there is essentially going to be our entire list of songs from the song list reducer
and are currently selected songs from the selected song reduce her state right here.
All of that data inside of a redux store if we were still working on that insurance application the
state object right here would contain our accounts and our policies and our claims history properties
as well.
So then right now let's try just cons. logging that thing out.
I mean to say console log States and then after that I'm going to say return state just to make sure
that everything works just fine.
Now after defining that function and then going to take it and pass it as the first argument to this
connector function down here.
So that's how we can figure this connect component.
I've said several times oh yeah we need to configure connect in some way and tell it how to get some
data from provider.
We can figure it by passing it a function it's going to pass that as the first function to connect that
state to props.
Now again I want to remind you we can call this anything we want to call it so we could call it get
my state if we want to.
Nothing special about calling it map state to prop's.
All right so let's save this.
We're going to run it and see what happens.
All right so I can flip back over and you'll immediately notice that we've got our state object printed
out right here.
We've got selected Saag that has all the data that was returned from our selected song reducer which
by default was no.
And then we've got these songs Saray as well that has those four song objects that we had to.
So now we essentially want to pull off just this song's property and make sure that it somehow gets
into our song list component.
Remember the song component doesn't care about the selected song at all it just cares about songs.
So to do so inside of my mouth state to prop's function right here I'm going to remove that council
Lague and I'm going to remove the state right there and I'm going to replace it with an object this
object is going to have a key of songs and its value will be state DOT songs like so so the object that
we return from the map state to prop's function is going to show up as props inside of our component
three essentially Sayne by returning the subject right here where essentially saying that at some point
in time the future inside of our songless component if we say this start prop's it's going to be equal
to exactly that object.
Right.
They're going to be an object that has a song's property and that will contain the list or the array
of all of our songs.
So that is exactly how we make use of the re-act redux library to get data from our redux store into
a component.
It's always going to be the exact same scenario we're always going to import connect at the top.
We're always going to call connect and then pass in our component as the second function call.
We're always going to define map state to prop's map state to prop's is always going to get a first
argument of state and we're always going to return an object that is going to show up as props inside
of our component.
Now if any of that seemed mysterious then just do a quick replay of those last 15 seconds or if you
missed anything in there to replay those last 15 seconds because that entire flow that I just mentioned
is going to be repeated a billion times.
On every single re-act project they you ever work on.
It's always going to be the same code the see inside of your.
Over and over and over again always import connects always the component always maps state to props
and then always export default connect your components right there.
All right so with that further ado inside of my components I'm going to try doing a console log of this
props like so let's just see what data shows up inside that component.
So I'll flip back over.
And now here's my prop's object.
I see my list of songs.
There is the list of songs right there.
And then you'll notice that we also got a reference to the dispatch function from our redux store as
well.
This is the same dispatch function that we use previously inside of code pen to manually dispatch an
action creator or someone manually dispatched an action after calling an action creator.
So if you ever want to change some data inside of our application we can make use of this dispatch function
right here.
But as you'll see in just a little bit there's a much more convenient way of doing that.
All right.
Now that we've got our list of songs inside of here please take a pause.
When we come back in the next section we're going to render this list of songs out inside of our song
list component.
So quick break and I'll see you in just a minute.