We've now wrapped up the portion of our application that calls for some amount of list building.
So here's our list.
We can see all the items.
And in theory if we had a whole bunch of them we could scroll through and have a really good time.
So that side of things looks pretty good.
We're going to pivot a little bit now and focus on how to handle a user tapping on a single row.
So remember the goal of the application whenever a user taps on a row that rows should expand with a
nice animation and show the users some details about that very particular library.
So if you recall much earlier we discussed how we were going to plan out the different reducers in our
application we were going to have one library reducer which we've already created and then we were also
going to have a selection reducer.
And the purpose of the selection reducer is just to record what the currently selected library is.
Each library has an ID attached to it.
So this lecture and user can just record the currently selected ID and everything should work out just
fine.
So in this section we're going to start by working on the selection reducer.
Remember the process for creating a new reducer.
They always go into their own separate file inside of our redos folder.
So in the reducers folder I'll create a new file called selection reducer.
J.S. then inside of your we need to declare you know basically our starting reducer.
So I will export default a federal function in this federal function is going to serve as a producer.
Now we need to have some like initial state for this application we need to have some initial value
that the reducer will return when our redux first boots up.
One thing that I haven't really mentioned quite in depth the end about this initial value is that it
cannot be undefined.
So in previous sections when we created that library reducer and we had that kind of like you know done
you reduce are in there that would always return an array.
I was returning an array just to make sure that we didn't not return undefined redux as set up to assume
that if you return an undefined Romary douceur you probably made a mistake.
So we always have to return a value that is not undefined.
So to start we'll just return know hey that works.
It is not undefined.
So it satisfies that requirement and makes sure that in the case that we call this thing at any point
in time when the application first boots up we do not want to have a pre-selected row.
So we don't want to default to say a id of one or ID 2 or anything like that.
So I will say just no we do not currently have a row selected.
Okay.
Our reduced her is pretty much good enough to wire it up.
So lets now flip over to our index not J.S. file inside the reducers directory.
Remember that for every reducer we create we have to wire it up to this combined reducers call.
So inside of the index not J.S. I will import selection or reduce or from selection reducer and now
I need to add it into my combine reducers call.
Remember the really important thing about combine reducers whatever key I provide in here for this selection
reducer is how this property will show up on my state object.
So I'm going to say that I want to have a property in my state object called How About You know I think
I've got in a couple of diagrams here what did I use select a library ID.
Let's go with that so another piece of state called selected library ID.
Whoops there we go.
And the value of this piece of state will be generated by my selection reducer.
So now in my application first fruits of the lecture inducer will or will execute exactly one time and
by default it will just return nil or as you.
So by default we do not have a selected library.
OK let's now flip back over to our list item components.
This list item component here needs to know about whether or not it is currently selected which means
this list item component needs to get access to our redirect state.
Once we get access to redux state inside this component we can compare the value of that selected library
ID to this start Propst library ID and if they are equal that means that this particular library is
currently selected.
So that will be our next step.
Let's take care of that in the next section