In this video we're going to start putting together our song detail component.
So remember all this thing needs to do is show some information about the currently selected song to
get a better idea of how we're going to put this together.
Let's take a look at one quick diagram so that you can understand how we're going to use the connect
function here.
Now we already looked at the diagram just like this one but it was for the song list.
So we're now going to change it just a little bit for the song detail.
Instead the song detail needs to know about some information that is stored inside of our redux store.
So we're going to rap our song detail with the Kinect component.
We're going to define a map state to prop's function that's going to essentially tell the provider Hey
tell me any time that the selected song changes in response the provider is going to tell the connect
function.
But every single time that the user clicks on a select button and they select a song changes the connect
function is then going to take the currently selected song and pass it as a prop down into the song
detail component.
Now the song detail component has absolutely no functionality tied to it that is going to somehow allow
a user to click on something or drag something or type something in.
That would cause a change to a redux state.
So we do not need to wire up any action creators to our song detail component.
OK.
So let's get to it.
I'm going to flip back over to my code editor and inside my components directory I'll make a new file
called Song detail.
Yes.
And then at the top I'm going to import re-act from react and I'll also import the connect function
from re-act redux.
Then inside if you're not going to make a class based component this time around you do not have to
make a class based component to work with the connect function.
You can work with the connect function with a functional component as well.
So inside if you're going to say Konst song detail is going to be a functional component and for right
now return a div with a text song detail.
Then at the bottom I'm going to export default song detail.
OK so that's just going to show the component by itself.
But like we just said we want to wrap the song detail with the connect component so that we can get
some information out of our redux store.
So to do so I'm going to define a map state to prop's function.
Remember this function right here is going to be called with our entire state objects so we're going
to reach into that state object and pull out just the property that we care about and return it as an
object from this function right here.
So in this case if we go back over to a reducers index file we can look at the combined reducers function
call right here.
Remember the keys on this object are going to be the keys inside of our state object so our selected
song is going to be available on state DOT selected song.
So back over here to get my currently selected song I can refer to state DOT selected song.
Now I'm going to put this into a object with the key of a song.
We don't have to call this things selected song.
We don't have to copy the key name on either side so I'll just call it simply a song and I'll make sure
that I return it from that function.
It's now done at the export default.
I'm going to call connect or put one set of parentheses.
I'll put the second set around song detail and then as the first argument to the connect function I'll
pass in map state to prop's.
So now up inside of my song detail component this thing should be getting a prop's object that is going
to contain the currently selected song.
So I'm going to refer to that argument as props.
And if right now will just cancel log out props like the all right that's pretty much it for the song
detail for right now.
Now we need to make sure that this thing actually shows up in our application.
So we have to go back over to our app component.
We have to import song detail at the top.
And then we have to put this into the components.
Returned GSX.
BLOCK So right after the div right here with column 8 wide I'm going to put another div right after
it.
It's also going to have a class name of column 8 wide and then inside of that div I'll put on song detail
like so.
So this is another good example of where our app component is no longer going to be really in charge
of customizing any of the child components that it renders.
That's absolutely what happened in the past before we had the app component in charge of everything.
And it passed a lot of config into our different components but now we are relying upon redux to provide
all the configuration that we really care about and all that changing data and the ability to change
data is being passed directly into the components themselves.
All right.
So let's now flip back over.
Now I see a console log right away.
So this is the prop's object inside of our song detail a component just as before.
We see that it gets the dispatch function directly.
We usually do not make use of that dispatch function directly.
Instead we wire up our action creators to the connect function as we saw just a moment ago.
Now we have got a prop inside the props object of song equal to nil.
The reason it's nil is because when our application first starts up we do not yet have a selected song.
And so we see a value of note right there.
But now if I clicked on the select button right here we called an action creator which updated a reducer
that updated our state inside of a redux store.
Anytime we update the data inside our redux store by dispatching an action or essentially calling an
action Creator it causes all of our components that are hooked up to the connect function to automatically
render.
And so this second called Zilog right here is from our song detail component automatically being re
rendered and inside there we can see that we have a song property with the song that I had selected.
And so now I can click on select for another song and I'll see a second concert's me a third council
log.
Now as our component gets re rendered a second time and so I can keep doing that.
And every time we click on that component automatically renders.
OK so now our song detail component definitely knows what the selected song is.
So the last thing we do is take the selected song and render out some information about it on the screen.
So quick pause will take care of that in the next video.