In the last section we went through the process of designing the different reducers inside our application
and we ended up deciding on having two separate reducers a producer that's going in turn our list of
libraries or so to the user and a selection reducer which is going to keep track of the currently expanded
or kind of selected reduce or library excuse me.
So in this section we're going to work on the design of our library reducer.
So we need to create a new reducer and it should always return a very static list of libraries to show
to our user.
So that's our goal you know flip back over to our reducers index file.
Remember inside of here right now we've got that single dummy reducer.
By convention we usually locate one reduce or in one file so like a one to one mapping just the same
way as we have with our components.
So inside of my reducers directory I will make a new file that is going to house all the code having
to do with our library reducer.
So I will make a new file and the reducers folder and I'm going to call it library reducer.
Yes.
And then inside of here.
Right now I'm just going to put in some boilerplate.
So a very again simple reducer whenever it runs.
Always return an array.
Am I going to flip back over to the indexed on J.S. file.
I'm going to wire it up to the rest of my application here.
So remember the very overriding theme of redux.
Nothing is done automatically for you.
Right.
And like just making a function inside of a file call library reduce or does not do anything we have
to very explicitly wired up.
OK.
So inside of this index Jasc file import library reducer from library reducer and then instead of using
a very simple dummy function right here we will say library reducer.
OK.
So just a quick reminder and we're going to just really really drive this home at this point next point
home to you in the coming sections here because it's one of the what I think is the most confusing points
of redux and maybe because maybe because I'm going to make such a big deal about it maybe it won't be
quite as confusing but you know whatever.
Let's just go through it.
We have said many times that reducers produce our application state right.
A producer runs it returns a value and boom that is our application state.
Now we might have many different reducers inside of our application and we need to somehow get them
all to work together properly.
And so that's why we introduced this combined reducers call right.
I said this is the thing that makes multiple reducers work together nicely.
So the thing that I really want to point out to you here and again I will just harp on this repeatedly.
We now have one douceur called the library reducer inside of my combine reducers call.
I assigned this reducer to a key called libraries of libraries right here like supersession that likes
just stare at that word libraries because I assigned the library reducer to this library's key right
now.
If I ever conc a log my state objects like you know Konst a log store that get state which we had done
several times previously.
I would expect the response to be or the result the console log to the libraries is an empty array.
OK so our library reducer right now always always returns an empty array.
And because I assigned that reducer to a key of libraries my application state will now be an object
that has the key libraries with a value of whatever got returned from that reducers.
So again like the whole point here is because I signed library reducer two libraries key my application
state has a key of libraries.
That's it.
I know a lot of talking just to convey that point.
But again this is something that I have found can be very very confusing and once we start making use
of our state objects and practice again I will come back and harp on this some more because I'm sure
you love being I'm sure you love being lectured endlessly right.
All right now I'm just kidding.
OK.
So here's our library producer again right now.
Very simple very straightforward not really doing anything.
But we wanted to return our list of libraries like the list of all the data showed to our user and we
agreed or maybe I just dictated one or the other that the data structure for this list of libraries
should be an array of objects where each object represents one single library.
So what I want to do now is I want to say instead of returning just a completely empty array I want
to return a list of objects that is going to represent all the different libraries to show to the user.
OK that's it.
So rather than kind of you know inside this reduce or typing out all these different libraries to show
to the user just to keep this reducer nice and clean.
I'm going to make a separate file to How's this list of libraries because I expect there's going to
be many of them.
I want to show so inside of my reducers directory.
I'm going to make a new file called library list dot Jaison.
Take special note of the file extension.
Here it is Jason.
It is not.
Yes.
So this Jason fall right here is going to be a dumb day dummy data file like just going to have data.
It is a Jaison file which means I should place Jason data in here.
It is not a javascript file.
I cannot locate javascript code inside of here so I can place an array in here and then an object inside
this object.
I will put all the properties I need for my my library.
So again keep in mind this is just one data.
It is not javascript so I do not have to use an export statement here at all.
Just have to put Jason.
That's it.
OK now I have already created a big list of libraries that I am going to copy paste into this file right
here so I'm going to flip over to this code editor over here where I just had this data file already
located and paste it all and I'm doing this intentionally very quickly because I don't want to have
to go through all this typing of all this these different libraries in here.
So in the next section the next section that you're going to see inside this course you're going to
have some amount it's going to be basically like a text section and it's going to have the contents
of this file right here so you can just go ahead copy paste it and paste it into this library.
JS on file.
One thing I want to point out here is that because it is a JS ON FILE all values are all string values
text values have to be wrapped with double quotes so absolutely feel free to change the value of any
of these libraries right if you want to add some to the end of your list.
Or you want to use completely different titles or different descriptions.
Absolutely feel free to modify this as much as you want.
Just make sure that any modifications you make both the key and the value have to be wrapped with double
quotes.
So unless you are going to do.
Again.
Well you know what.
Tell you what.
How about let's take a quick pause.
I'll let you copy paste this file ope over and then we will actually make use of it inside this reducer.
So again take a quick break.
Cut Paste the stuff in here and we will return and make use of it.