Unless section we're able to render out our list of songs on the screen.
So now we need to make sure that any time that a user clicks on one of these select buttons we somehow
try to select that song so to speak.
Now when we select a song what we really want to do is update the data where the state of our redux
store.
Remember any time that we want to update our data with redux we have to call an action creator.
Now we've already put together an action creator inside of our actions index not just file that will
attempt to select a song.
So we call this action create or select song.
If we pass a song object to it it will return in action with it type of song selected.
And our payload of song.
This action should then end up inside of our selected song reducer which is inside of our reducers index
file.
So this reducer is going to look at the action type if it is equal to song selected then it's going
to return that particular song.
Otherwise if it is a action with a different type then it's going to just return whatever the currently
selected song is.
All right.
So all we really have to do now is figure out how to call that action creator.
As a quick reminder I told you in passing a couple of videos ago that the Kinect function is going to
be used not only to get data out of our store but the connect function can also be used to kind of get
action creators correctly into our song list.
So we're going to import our action creator that we created number that function that we just looked
at two seconds ago and we're going to essentially wire it up to this connect helper.
All right so back inside my song list at the very top I'm going to import select song from actions.
Now remember when we created select song the action creator we export it as a named export from this
file.
That is why we are using the curly braces right here.
If we had exported it using the default keyword we would not use the curly braces.
All right so now that we've got our action creator this is the plain function by itself.
We're going to pass it into that connect function at the bottom.
So I'm going to go down to the bottom and then as a second argument to the connect function I'm going
to pass in an object's this object is going to have a key of select song and a value of the action creator
that we just imported.
Notice now that the key and the value inside this object are identical.
So we can use a little bit of yes 20:15 syntax to shorten this up and reduce down to just say select
song like so still inside of a set of curly braces.
All right so there's the line in total now that we are passing in a second argument here the connect
function is going to take that select song action creator and pass it into our component as a prop to
again inside the render method a log.
This prompts.
Now when I save this you'll notice that my code formatter kicked in and did a little bit of a reactor
right there.
It still totally equivalent to what you just saw a moment ago.
All right.
So I'm going to save this file and we'll flip back over.
It's now inside of my console log right here remember.
This is my prop's object.
I see that I have a function here called select song.
So that's our action creator.
And if we call it it's going to automatically take the action that gets returned and send it in to read
ox's dispatch function.
Now when I say that last sentence right there I said take the action that gets returned and send it
into the dispatch function.
I'm kind of glossing over a tremendous amount of complexity.
So what is the complexity there.
Well I want to point out something kind of interesting.
Notice how we imported the action created right here and then rather than just directly calling it inside
of our component like rather than just saying hey let's call select song.
You notice that we went through all this extra work of passing it to the connect function instead.
So you might be all that curious why we went through that extra work of passing it to connect as opposed
to just directly calling it inside of our component.
So we're going to investigate exactly why that is in just a moment.
But before we do I want to make sure that we can call the action creator from within our component and
actually select a song.
So let's make the app work first and then I'll tell you a lot more about exactly what is going on with
the connect function right here and why we are passing it this object with a action creator inside of
it.
OK.
So to make sure that we correctly call the action Creator I'm going to find my button inside of render
list I'm going to get myself a little bit more space on that tag.
Like so.
And then on the button elements I'm going to pass in a on click event handler.
So anytime that someone calls this I want to run a function that's going to call this prop's select
song and I'm going to pass in the current song that we are iterating over.
All right.
So let's save this and we're going to test it out really quickly.
So I'll flip back over.
I'll make sure that I refresh.
And now if I click on select Well it appears that basically nothing really happens.
So I remember right now we might be successfully updating our state object or the state inside of our
redux store but we don't really have any indication of that whatsoever right now.
In order to see our changing state one thing we could do very easily is go down to our map state to
prop's function.
Remember this function right here gets called with all the data inside of a redux store.
Anytime that we change our redux States or any time that we rerun our reducers and produce some new
state object the map state props map states the function is going to rerun with the newly created state
object.
So in other words every time that we click on that select button this function should rerun and it's
going to be called with the new state object a second time or a third time or a fourth time.
So we could add a console log inside of here and council log out the entire state.
Then anytime that we click on a button we should see a new console log and we should see the new selected
song printed up inside that state object.
So I'm going to flip back over.
You'll notice that right away I already see a console log here.
So this is all of our state inside of the store.
We have our list of songs and we have our default selected song of M..
If I now click on the select button I'm going to see another console log and I see that I correctly
have a selected song with a title and a duration.
In this case the title is no scrubs.
Ah these song titles these are the worst songs.
All right if I do Mark arena I can select that one.
And now I see a title like arena and if I want to do some Backstreet Boys here I can look at selected
song and see the title of I Want It That Way.
OK.
So it looks like our application is definitely working.
Any time we click on a button we are updating the state inside our store.
But remember I had mentioned that it's kind of interesting that we are choosing to import the action
creator right here and then pass it off to our Connector function as opposed to just directly calling
the action creator whenever this button right here gets clicked.
So let's take a quick pause right here.
When we come back the next section we're going to have a quick discussion to help you understand exactly
why we are doing that.