In the last section we created our redux store and then passed it off to the provider.
So now any component inside of an application can somehow get access to that redux store through the
provider Tech.
Let's say start to work on the re-act side of our application by creating a song list component and
then hooking it up to our app component.
So inside of my components directory I'm going to make a new file called Song list.
Yes.
And then inside of here I'll put together some pretty basic markup I'll say import re-act from re-act
and then I'll create a class based component in here.
So I'll say last song list extends re-act components.
Now by the way since we've now seen exactly how that named export thing works this you know there's
an alternate way that we can write out re-act component right here if we wanted to we could directly
import the component base class from the re-act library like so.
So we have both a default export and a named export on a single line.
Now right next to extents we can write out simply component instead of re-act component.
Now both ways are completely appropriate to define a component.
There's not one way that is better than another in any way shape or form.
So whichever way you like more personally you will see each of them just about 50 percent in the while
like 50 percent of blog posts are going to show one way 50 percent are going to show another way.
So it's really up to you which way that which way you define your base class right here are superclass
I guess.
Now inside of song list I want you to find my render method.
And right now I'll just return a div that says song list and then after that I'll say export default
song list.
Let's now wire the thing up to our app component and then we'll start thinking about how we're going
to implement this connect component as well.
So I'm going to change back over to my apt just file at the top I will import song list from song list.
And then I'll show that inside this things render method well put song list inside there and I'm going
to turn it into a multi line GSX expression.
Don't forget to clean up the semi-colon after that div right there make sure delete that thing.
All right so that's it.
I'm going to make sure I save both files and I should be able to flip back on to my application and
see song list appear on the screen.
Right now it's just kind of set our sights a little bit low.
Let's say that we want to get our list of songs into the song list and just cancel log them.
That's all I want to do for right now.
So in order to do so we need to create an instance of this Kinect component right here and we need to
pass it some configuration that gets it to reach back up to the provider and tell it that it wants to
get the list of all the songs inside of our app so we're going to write out some code here that you're
going to write out a billion times.
Like just all the time you're going to write out the same stuff over and over again.
This connect component thing is going to be defined directly inside of our song list component file
because only the song list needs to create this connect function that reaches up and gets that list
of songs.
So at the top of the file I'm going to import connect from apps from re-act dash redux.
And notice here that connect is lowercase.
It is not capitalized it is lowercase to create a instance of the connect component.
We're going to use some kind of strange looking syntax.
OK.
This is very strange looking syntax but bear with me.
I'll tell you exactly how it works.
So I'm going to go down to my export default down here and right in front of song list I'm going to
say connect I'm going to place a set of parentheses and then I'm going to put a second set of parentheses
around a song list like so.
Now this might look like really weird syntax to you but trust me it is completely valid.
Javascript code is to prove that to you.
I'm going to save this file and then we're going to flip back over to our application and you're going
to see that we still see our song list component on the screen.
So before we try to configure this connect thing and get it to tell the provider that we want our list
of songs I want to very quickly tell you about the syntax that you see right here by showing you a quick
written example.
So I going to flip on over to that little code editor over here.
Remember you can get here by going to Stephen Grider dot dot IO slash J.S. playgrounds or you know actually
we can go to slash playgrounds like so simpler.
OK.
So we're going to write out a function that essentially is going to end up with the same signature as
what you see right here.
So I'm going to define a function that I'll call a connect and then inside if you're going to return
a function and whenever that thing gets called I'm just going to return a value of there like so.
So we've got a function that returns a function.
Now whenever I call that original function connects I don't immediately see anything out over here.
But if I now add on a second set of parentheses I see that text.
Hi there.
So what is the connect function doing in the re-act redux library doing.
Well all it's doing is returning a function and when we call the function that gets returned we put
on the second set of princes right after.
So connect right here the first set returns a function.
The second set invokes the function that got returned.
That's it completely valid Javascript code.
So we understand that this is a valid javascript.
Let's take another quick pause right here.
When we come back the next section we're going to start to configure this connect function call so quick
puzzle I'll see you in just a minute.