In the last section we introduce the idea of this connect help right here from the re-act redux library.
And we said there was going to help us get access to our application state inside of a given component.
So let's now continue with this implementation.
I'm inside of my library list file right here and we still have our connect up are wired up right now
but it's not really appearing to do anything too much for us.
So here's how he uses Kinect helper we connect helper.
We can pass in a first argument to it.
So like first argument inside of the first set of parentheses as a function.
And I'm going to call this function map state to prop's it's going to take an argument of state like
so and then I don't pass it in as the first argument.
Ok so I know that I just kind of jump the gun in there a little bit through a bunch of stuff up on the
screen without giving you a good idea of what's going on so let's just take a quick pause and discuss
what's happening.
The purpose of this function right here map state to prop's is to do just what the function name says
right here and I know the function name is kind of a little bit confusing but it is somewhat reasonable
once I explain it.
The purpose of this function is to take our global state object.
So this is our application state.
The thing that sits inside of our redux store and it will map it in some fashion or kind of like take
some properties off that state object and then provide them as props to our component of library list.
So that is the purpose of map state to process in practice so well you know sure that description is
easy to say but let's actually kind of figure out how this thing works.
Let's get started by putting a console log inside this function right here and just see when it gets
called and what it gets called with.
So I'm going to add a console log of state.
So you know let's look at what the state object is.
Figure out what properties it has and also figure out when this console log right here gets called.
Or excuse me this Matt States the proper function gets called.
Now before I can refresh the simulator and run this code right here if you recall we are not actually
showing the library list anywhere inside of our application right now.
So we need to first go into our apt J.S. file and make sure that we actually show the library list inside
of here.
Remember just because we created the component doesn't actually mean it necessarily mean that it's going
to be visible on the screen.
So at the top we'll import library list from components library list and I'm going to place it inside
of the tag inside our component.
So lie very list like so cool.
So I'm going to pop up in Chrome.
I've got my debugger here already.
One quick thing I want to mention back inside of library list.
We are not returning any valid GSX from this component just yet.
So I'm going to expect to see a big error message.
That's totally fine.
We should still see the console log anyways so we will see an error but it will still be useful for
us.
So back in my simulator I will refresh and get a nice big air there but that's really fine.
Here is the console log from that map state to prop's function.
So our map state to prop's function got called with one argument at the top and the argument we called
state because it is our application state.
So check out this object right here.
It is an object with a key of libraries and a value of I don't know an array an array of objects where
each object represents one of our particular libraries.
So this is starting to like tie the whole story together a little bit.
Right.
We now have.
If I flip over to my reducers file index start Geass I had said that our state object will have a key
of libraries and a value of the list of libraries produced by our library reducer.
So when our application first boots up it evaluates this statement right here it executes the library
reduce or 1 time to get some like initial state put together.
And therefore our initial state objects are at first.
Up is an object with a key of libraries and a value of whatever got produced from the library reducer.
So then when our map state the proper function is executed with the first argument being our application
state we saw that count the log.
And yup it definitely was our application state.
OK but that's just kind of step one right here.
Right.
Step one we have now verified that map state to prop's is called in this function right here gets called
and the first argument is state.
But again I said you know we're going to use connect to somehow get access to our state object or some
properties out of it and pass them to the library list.
That was the whole goal here.
Communicate.
The list of libraries to the library list component.
And so right now we're not quite doing that.
You know we've got two state object inside of that state to prop's.
But how do I actually communicate any data from this function into this component.
Well to do so here's kind of the magic of Matthysse to process.
If I return a function.
Excuse me if I return an object from this function right here that object will show up as props to my
component library list.
So let's see what that looks like in practice if I return an object from this function right here.
It will show up as props to library list.
So I'm going to make an object with the key of libraries and the value of state libraries or member
state libraries would be a reference to my array of libraries.
So it should have like 9 objects inside of it.
So now I'm going to expect that my component library list has a problem of libraries and the value of
the array of libraries.
I know that library were just flying all over the place here.
Hopefully we can keep that word in check at least somewhat.
So just as a test inside my render method I'm going to put in a console log of this prompts.
So my expectation now is that my prop's object should have a library's property to it with a value of
the list of libraries like the array of all those objects.
So I'm going to go back over to Chrome.
I will refresh my console or just clear it excuse me and then I will refresh my simulator.
So I refreshed my simulator still get an error here because I'm not returning any valid GSX.
But if I expand this consulate statement right here you'll see that I have an object with a property
of dispatch which is a function.
We'll talk more about that later.
But more importantly I have a property of libraries and that is an array that contains all the libraries
for my application.
So clearly this connect helper is forging a connection between our library list and our application
state.
Again that is the whole purpose of the connect helper.
It is what forges a connection between our re-act side of our application and the redux side.
OK.
So we clearly have our data inside the component at this point in time.
Let's now continue in the next section and figure out you know exactly how we're going to build our
list out of all these different libraries.