We've now got the skeleton of our app put together and it's time to now produce a list of different
libraries to display to the user.
So just remember how this app is going to work.
We want to have a list of libraries to serve the user.
And then whenever user taps one we want to expand that particular library and show the user more detail
about it.
So we want to know somewhere we have to basically stash a list of libraries to show the user you know
we need that data to sit somewhere inside of our application.
Now in a previous out in the first film we worked on when we were working with that list of albums I
made the case to say you know whenever you're making a mobile application it a lot of time makes sense
to store data like that you know data that you want to show to the user on a third party server like
you know an actual API.
And then whenever you want to make changes to the list of data that should be shown to the user you
just update the server right as opposed to having to update the app.
In other words don't hard code your data inside your application.
That was the lesson to learn for this app right here.
Just for the purposes of giving getting a really solid foundation in redux we're going to break that
rule a little bit and we're just going to say for this application we're going to hard code a list of
libraries inside our application so like we will have a file in our project right somewhere in here
a file that says specifically show this list of libraries to the user.
So just to be clear this is like kind of a one off thing just to get a little bit stronger grasp on
redux.
OK.
So in this section I want to figure out how exactly we are going to produce that list and make it available
to the rest of our application.
So I'm kind of you know I'm talking about here is producing some amount of data that's going to like
C in our application and we're going be able to get access to that data and you know make change soon
or whatever.
So at any point in time when we're working with redux And we ever use the word data like data inside
of my application we need to be thinking about reducers.
Reducers Purdue's our applications state in our application state is what are what holds all of our
data for our app K like our state is our apps data.
So inside of our application state we will have a list of libraries and because our reduce errors produce
our application.
It makes sense that our reduce or must produce this list of libraries to show to the user.
So I'm over here right now inside of the reducers index file where we had hard coded just a very simple
reducer for right now about as simple as it gets.
Remember a producer is a function that returns some amount of data.
So here's our douceur right here and right now it's returning an empty array.
So just empty array no libraries right now.
So what I'm suggesting here what I'm trying to say is that this array right here should be empty it
should be like a list of libraries to show to the user.
So whenever this reduce or runs it will return a list of libraries to show to the user.
That's that's like the goal here.
That's our plan.
Now this is kind of getting to the topic of reduce or design or kind of like what different reducers
we're going to have in our application.
So before we just kind of willy nilly throw a list of libraries in here I want have a quick discussion
about the different types of reducers that we might have in the application that we're building right
now and we're going to walk through the process of how we decide what reducers to make in the future
we will repeat this process over and over again of kind of deciding what reducers we want to have.
So for the first time I walked through it nice and slow.
So here's the mockup for application.
Right.
We're looking at it here.
And I want to ask you a question I want to ask you what are all the different kind of variables that
I would have in this application right.
What are the different like.
The real question on ask here is what are the different pieces of state that would have an application.
I don't want to really use the word state I want to say where are the different variables what are the
different pieces of data they're going to have for this application.
We have a list of libraries and then a currently selected library right.
That's kind of how this application works.
So I'm going to suggest that really we have two separate pieces of state inside this reducer.
We have a list of libraries to show to the user.
Right that's one distinct piece of state.
And then we also have a separate piece of state which is the currently selected library.
So like the most recent one that the user tapped the the one that the user tapped to select and that's
the one we want to expand and show with more detail to the user.
So for this application I'm going to suggest that we have exactly two pieces of state.
Again a list of libraries currently selected library because I have two pieces of state.
I will suggest that we make two separate reducers and we'll call maybe one of them we'll call like library
reducer and then we'll call the other one maybe something like selection reduce or the library reducer
will be responsible for producing our list of libraries to show to the user.
So it'll be an array of maybe objects where each object represents a distinct library to show to the
user.
It will have properties like ID so like the idea of a library the name of the library.
And I don't show it here in this text because it would have been really long but it should probably
also have the description of the library as well.
So like you know the text to show that further describes that library then on this second reduce search
and suggest that we have we might have we might call it a selection reducer and you can see in here
that I just had this very simple value for it of one.
So what is this right here.
Well for this selection reduce.
I'm saying that we will have a producer that's that just keep tracks of what the currently expanded
library has to show to the user.
And the way that it's going to work is it will record the id the ID of the library to show more detail
of the one to expand.
So right now the selector inducer has a piece of state of one or like a value of 1 that means the user
wants to expand and see more detail about the library with ID 1 which is the reactor library.
So that is how were going to kind of piece together the state inside this application.
We're going to have a library reducer and a selection reducer the library or reduce or produces the
list of libraries to show the user selects reduce or keeps track of the current library that should
be expanded to show more detail.
So that's it.
That's the goal here.
I'm talking.
So let's take a quick break.
And in the next section we will start implementing our library reducer