In the last section we wired up our action creator to list item component.
So we did run up a little bit short as we didn't really have any component inside of here.
It was capable of receiving an on press event.
So we didn't really have any way to make sure that we could actually call that action creator when the
user tapped on the road for that we're going to need to import a touchable component.
Now when we previously looked at our documentation for all those touchable things we saw that there
were four types of touchable components and at the end of the day we used one inside of our button component.
So if I open up my button here you'll see we use the touchable opacity.
Each of those touchable components are designed to just handle touch feedback from users.
One of those four sites is going to be very handy for us here.
It is called touchable without feedback.
This component is designed to register a press event but not give any feedback to the user when it occurs.
And that's actually perfect for our use case because the feedback that the user is going to get is the
row expanding.
So we really don't need to show a highlights or a fancy opacity change nothing like that.
We just have to expand the row and that is going to be our feedback to the user.
You know like the responses show like yes we receive your tab.
So let's import that touchable without feedback component and make use of it inside of ours.
So update reac native library we'll import touchable without feedback.
And I'm also going to import the view tag as well.
So now we can wrap our entire GSX block with that touchable without feedback component.
And then whenever someone taps on the text or the card section you know whatever it might be we can
register a press event and call our action couriered to select this very particular library.
So we'll start off by wrapping our entire GSX block with the touch of without feedback component.
So we say touchable without feedback
I'll do a little bit of indenting and then close the tag off
cool.
Now inside of here is all the rest of the GSX we already had because I expect to have a second card
section that's going to show the description of my application.
I'm going to do just a little bit of work right now.
I'm going to wrap this with a view tag so that when we come back through later and add in the second
card section as a sibling to this one it will be just a little bit easier.
So I've now got my touchable without feedback.
I've got my view tag and my card section.
So now we need to hook up an on press handler to the touchable without feedback so we know whenever
a user touches the thing right here.
So I'm going to pass a prop called on press Remember that's how we register a callback with a touch
of what that feedback into that I will pass a federal function.
So inside this federal function is the code they will execute whenever a user taps on this row.
So inside of here is exactly where we want to call our action creator.
I want to call my select library action creator and I want to pass it this very particular library's
ID.
You know the the the library that maps up to this list item so that I can select that very particular
library.
So inside of your we will call this stuff props that selects a library and will pass in the Id noticed
that I don't have a reference to ID just yet.
We're going to do a little bit of destructuring off of the library to get access to that ID.
So I'm going to clean up the kids like here because you probably don't need any more and I'll replace
it with a little bit of destructuring.
I'm going to pull off the I.D. and title properties from this prop stock library.
So now when I call my press I'm going to call the select library action creator with this particular
I.D. And I notice that down here as well.
Scott Propst out library title since I'm destructuring the title up here.
I can just condense this down to just the title.
There you go.
Just the title by itself.
OK.
So I remember the idea behind action creators.
After we bound them with that connects help or at the bottom.
In theory whenever the action creator is called It will return an action that gets sent off to all of
our producers in our application.
So I think at this point in time we should add a console log statement to our selection reducer.
I've got my selection reducer opened right now.
Let's add a console logged this thing to make sure that the action is showing up inside this.
OK let's try it up inside of here.
I'm going to cancel the log and I need to add on the arguments that the user is called for.
Remember reducers are always called with the state object which is the state that was returned the last
time this reducer was executed and a second argument of action.
So whenever I dispatch an action it will show up as the second argument.
So let's just log that action OK.
So I would flip over to my Krogh or my you know my chrome console refresh my simulator.
And while that was interesting look how we instantly got some console logs in here.
It looks like a reducer.
As we've mentioned many times previously whenever our reduce or seeing our application first boots up
in redux first starts up it runs all of our reducers at least one time to assemble some type of initial
state for our application.
So this is that kind of boot up action that's coming through here now Ishmael to tap on any row here
and see an action flow through that reducer.
And in fact I do I get an action of type select library and it appears to have a payload attached to
it which should be the ID of the library.
I just clicked on.
So with and had an idea of zero.
If I click on it I get a payload of zero.
Yep and then actually is at the very end has a payload of 8 because it has ID of 8.
Awesome.
This looks perfect right here.
The last thing we have to do now that we are receiving this action inside a reducer is make sure that
our douceur watches for an action of type select library and whenever it sees that it should return
the selected library's.
And that way this reduce or will create the selected library ID piece of state.
So let's take care of that in the next section.