All right hopefully you have now copy pasted the contents of all these libraries into the library list.
Jason File.
So now we are going to import that list of libraries into our library reducer and instead of returning
this empty array right here we'll return that list of data or list of libraries that we just added.
So at the top of my library reduce or file import just we'll call it just simply data from library list
dot Jaison and take special note because it is a file extension with Jaison instead of us.
I have to specify here the packager web packs that we're using kind of behind the scenes here behind
the scenes of Riak native.
By default it will assume that all your files.
And with Jay Yes.
So if I want to use dot Jaison or like a different file extension I have to be very explicit about it.
All right so now this data variable right here this import should be an array of objects where again
each object represents a single library.
So now inside of my producer I'm going to say that whenever this producer runs whenever this thing runs
I will always return my list of libraries.
So now my expectation is that because I hooked up my library reducer to the library piece of state if
I were to ever call console log store don't get state I should get back something it looks like libraries.
That is an array with ID of one title of web pack description of you know so on whatever.
And then all the other libraries that are in here as well.
OK.
Because this reducer is not looking at any action right it's not like looking at the different actions
any instruction or some like that it is always going to return the list of data.
So as many actions as we might dispatch Remember actions is how we update the data that are that is
inside of our reducers no matter how many actions we dispatch we will always have this static list of
data coming back from the producer.
All right so I can clean up the council log here just as I want to see it.
So this is our list data.
Hey we've got something right.
Hooray.
Or we do.
I guess I mean we haven't really used it just yet but maybe that be a great next step here.
Maybe maybe we should go back to the re-act side of things and figure out how to now take this data
that we're producing and show it inside of our application.
I think that would be a great next step here.
So let's make a new component that will be responsible for just rendering this list of libraries to
the user.
Since you know now in theory we do have some some data to show to the user.
So because I want to show a list of libraries of the user I'm going to make a new component inside my
components directory called library list.
Yes.
So a library list out just right here.
The purpose of it is going to be to just render that list of libraries to the user.
So let's throw in our usual boilerplate I would import react and component.
I am going to make this a class based component so like say class library list extends component
I will find my render method not return nothing.
And right now I was going to place just a return statement in there.
We'll talk about why in just a moment.
And at the bottom we will export default library list.
OK.
So boom here is our boilerplate.
Good place to start.
Now this computer right here Lyrae list has a very interesting requirement.
We need to somehow inside this component reach into our redux state and pull out that list of libraries
right.
Like we need to get at that list of libraries somehow.
Now you might think to yourself Hey Steve no problem let's just you know important data from library
list Jaison whatever it was and then we can just render everything inside this component and boom are
happy.
Ok yeah that is how we can do things if we were not using redux.
But when we're using redux inside re-application things change a little bit and we now have a very discrete
very well-formed very like documentable and reproducible method for pulling data out of our state object.
Remember out of our redux store and showing it inside of a component.
So this method that I'm about to show you you know we're going to cover inside the section or maybe
it'll lead over to the next one little bit is going to be the way the one and only way in which we reach
into our redux state and access some amount of data.
All right.
So let's let's at least get started on it in this section and then maybe continue in the next one OK.
So here's kind of a diagram of what our application looks like right now.
Let's I'm going to change the name of this.
What it really is libraries and that one is fine.
OK.
So this is kind of what our application looks like right now.
At the very top we've got our provider tag and as we've learned that wraps our store.
Right.
And.
OK.
That was an awful typo libraries.
OK.
So I need to just stop trying to they're good enough whatever.
So inside of our store we have just one or so right now technically you know we don't really have to
select a library idea just yet but this eventually will be the piece of state that reflects what the
selected library is.
But for right now we just really want to focus on this library's piece of state.
So we said that the libraries piece of state is the list of libraries.
Right.
Is what is being produced by that reducer.
So the provider tag is showing or is basically inside the app component right.
And are out component will very shortly be displaying the library list like we haven't rendered inside
there just yet but we will very shortly.
So what we have to do what we need to figure out is how to get this library's piece of data this library
piece of state from up here and push it down into our library list.
And that's that is the goal.
We want to get something from our store down into this child's component right here.
We need to forge a connection between the store and the library list.
So how might we do that.
To get some amount of data and push it into the library list from our store we're going to use what
is called a connect helper that connects right here is a feature of that re-act redux library.
And remember reactor's locks that library.
We discuss it.
It is the glue between redox and reacts so it kind of makes sense that we are using that to get access
to some piece of redux data from a re-act component connect is a tool that is used explicitly to connect
a component to the redux store.
So by wrapping so to speak the library list with this component or seeing this connect function is Connect
help right here.
We now have the ability to reach back up to provide her up here to the store and say hey give me I want
a piece of state I want access to that like libraries piece of state.
So that's the idea here.
We are going to use the connect helper to give the library list some very discreet access to our you
know application state up top.
I know this might be a little bit of a long section but let's add a little bit the code in just to get
started with this thing and it could continue in the next section.
So to add a Kinect helper to any single component side of our project I will first import that connect
all at the top so import connect from the re-act redux library.
Now here's here's the weird part about connect.
So connecting again we use it to get access to our Reebok's state.
The weird part about it is the syntax that we use for implementing it.
So we're going to toss in some code here and we'll talk about exactly what it's doing.
I mean we go down to the bottom my file to my export default statement and here's the weird syntax.
I mean to say connect and add a set of parentheses and add another set of parentheses around library
list.
So I've got connects with one set of parentheses and then another set around library list.
So this is not a mistake here.
This is very much on purpose.
So here's what the syntax does.
It calls the function connect because connect is a function when Connect is called.
It returns a nother function.
So you can imagine that this immediately gets invoked and gets turned into a function.
We then immediately call that connect return function with the library list.
OK so you kind of think of this as a two step process.
First K'NEX gets called and returns a function.
We then immediately call that function with the library list to set process.
So why in the world right.
Why in the world did the library author choose to make a method signature like this.
Why not just do something like connect library list and then whatever other arguments might want to
have in here.
Fantastic question.
Great question.
This goes back to my general guidance on redux.
It is a lot of fancy stuff that otherwise obfuscates concepts that are you know maybe not the worst
thing in the world not the scariest thing.
Maybe maybe some of these concepts are not so difficult to understand.
It is sometimes the implementation or the syntax or the crazy terminology that redux uses that makes
it kind of confusing.
Anyways let's get to the next section and figure out exactly how to use this connect helper to get access
to the piece of state that we want