1
00:00:01,060 --> 00:00:05,680
In the last section we wired up our action creator to list item component.

2
00:00:05,880 --> 00:00:10,580
So we did run up a little bit short as we didn't really have any component inside of here.

3
00:00:10,760 --> 00:00:13,650
It was capable of receiving an on press event.

4
00:00:13,710 --> 00:00:18,000
So we didn't really have any way to make sure that we could actually call that action creator when the

5
00:00:18,000 --> 00:00:23,560
user tapped on the road for that we're going to need to import a touchable component.

6
00:00:23,790 --> 00:00:28,080
Now when we previously looked at our documentation for all those touchable things we saw that there

7
00:00:28,080 --> 00:00:33,940
were four types of touchable components and at the end of the day we used one inside of our button component.

8
00:00:34,110 --> 00:00:38,880
So if I open up my button here you'll see we use the touchable opacity.

9
00:00:39,340 --> 00:00:45,160
Each of those touchable components are designed to just handle touch feedback from users.

10
00:00:45,270 --> 00:00:48,740
One of those four sites is going to be very handy for us here.

11
00:00:48,750 --> 00:00:52,530
It is called touchable without feedback.

12
00:00:52,530 --> 00:00:59,020
This component is designed to register a press event but not give any feedback to the user when it occurs.

13
00:00:59,070 --> 00:01:03,960
And that's actually perfect for our use case because the feedback that the user is going to get is the

14
00:01:03,960 --> 00:01:04,980
row expanding.

15
00:01:04,980 --> 00:01:10,240
So we really don't need to show a highlights or a fancy opacity change nothing like that.

16
00:01:10,440 --> 00:01:13,790
We just have to expand the row and that is going to be our feedback to the user.

17
00:01:13,790 --> 00:01:18,560
You know like the responses show like yes we receive your tab.

18
00:01:19,380 --> 00:01:24,820
So let's import that touchable without feedback component and make use of it inside of ours.

19
00:01:25,200 --> 00:01:32,000
So update reac native library we'll import touchable without feedback.

20
00:01:32,580 --> 00:01:35,740
And I'm also going to import the view tag as well.

21
00:01:36,600 --> 00:01:43,080
So now we can wrap our entire GSX block with that touchable without feedback component.

22
00:01:43,410 --> 00:01:48,810
And then whenever someone taps on the text or the card section you know whatever it might be we can

23
00:01:49,110 --> 00:01:54,940
register a press event and call our action couriered to select this very particular library.

24
00:01:54,960 --> 00:02:01,210
So we'll start off by wrapping our entire GSX block with the touch of without feedback component.

25
00:02:01,320 --> 00:02:04,560
So we say touchable without feedback

26
00:02:07,250 --> 00:02:10,550
I'll do a little bit of indenting and then close the tag off

27
00:02:17,700 --> 00:02:19,430
cool.

28
00:02:19,860 --> 00:02:27,240
Now inside of here is all the rest of the GSX we already had because I expect to have a second card

29
00:02:27,240 --> 00:02:30,120
section that's going to show the description of my application.

30
00:02:30,120 --> 00:02:32,150
I'm going to do just a little bit of work right now.

31
00:02:32,250 --> 00:02:39,480
I'm going to wrap this with a view tag so that when we come back through later and add in the second

32
00:02:39,480 --> 00:02:42,970
card section as a sibling to this one it will be just a little bit easier.

33
00:02:42,990 --> 00:02:46,020
So I've now got my touchable without feedback.

34
00:02:46,020 --> 00:02:49,740
I've got my view tag and my card section.

35
00:02:49,740 --> 00:02:55,500
So now we need to hook up an on press handler to the touchable without feedback so we know whenever

36
00:02:55,500 --> 00:02:57,930
a user touches the thing right here.

37
00:02:57,930 --> 00:03:04,200
So I'm going to pass a prop called on press Remember that's how we register a callback with a touch

38
00:03:04,200 --> 00:03:08,660
of what that feedback into that I will pass a federal function.

39
00:03:08,670 --> 00:03:13,710
So inside this federal function is the code they will execute whenever a user taps on this row.

40
00:03:14,130 --> 00:03:18,620
So inside of here is exactly where we want to call our action creator.

41
00:03:18,750 --> 00:03:24,690
I want to call my select library action creator and I want to pass it this very particular library's

42
00:03:24,690 --> 00:03:25,240
ID.

43
00:03:25,260 --> 00:03:30,540
You know the the the library that maps up to this list item so that I can select that very particular

44
00:03:30,540 --> 00:03:31,220
library.

45
00:03:32,730 --> 00:03:40,100
So inside of your we will call this stuff props that selects a library and will pass in the Id noticed

46
00:03:40,200 --> 00:03:42,160
that I don't have a reference to ID just yet.

47
00:03:42,300 --> 00:03:47,170
We're going to do a little bit of destructuring off of the library to get access to that ID.

48
00:03:47,460 --> 00:03:52,050
So I'm going to clean up the kids like here because you probably don't need any more and I'll replace

49
00:03:52,050 --> 00:03:54,300
it with a little bit of destructuring.

50
00:03:54,510 --> 00:04:00,700
I'm going to pull off the I.D. and title properties from this prop stock library.

51
00:04:01,200 --> 00:04:08,520
So now when I call my press I'm going to call the select library action creator with this particular

52
00:04:08,520 --> 00:04:11,440
I.D. And I notice that down here as well.

53
00:04:11,550 --> 00:04:17,130
Scott Propst out library title since I'm destructuring the title up here.

54
00:04:17,130 --> 00:04:22,140
I can just condense this down to just the title.

55
00:04:22,140 --> 00:04:22,620
There you go.

56
00:04:22,620 --> 00:04:25,050
Just the title by itself.

57
00:04:25,050 --> 00:04:25,550
OK.

58
00:04:25,620 --> 00:04:29,810
So I remember the idea behind action creators.

59
00:04:29,820 --> 00:04:33,360
After we bound them with that connects help or at the bottom.

60
00:04:33,360 --> 00:04:40,200
In theory whenever the action creator is called It will return an action that gets sent off to all of

61
00:04:40,200 --> 00:04:42,570
our producers in our application.

62
00:04:42,570 --> 00:04:49,720
So I think at this point in time we should add a console log statement to our selection reducer.

63
00:04:49,890 --> 00:04:51,900
I've got my selection reducer opened right now.

64
00:04:51,900 --> 00:04:57,500
Let's add a console logged this thing to make sure that the action is showing up inside this.

65
00:04:57,680 --> 00:05:00,850
OK let's try it up inside of here.

66
00:05:00,900 --> 00:05:06,090
I'm going to cancel the log and I need to add on the arguments that the user is called for.

67
00:05:06,090 --> 00:05:13,110
Remember reducers are always called with the state object which is the state that was returned the last

68
00:05:13,110 --> 00:05:19,170
time this reducer was executed and a second argument of action.

69
00:05:19,170 --> 00:05:23,260
So whenever I dispatch an action it will show up as the second argument.

70
00:05:23,370 --> 00:05:28,370
So let's just log that action OK.

71
00:05:28,790 --> 00:05:35,440
So I would flip over to my Krogh or my you know my chrome console refresh my simulator.

72
00:05:35,930 --> 00:05:41,260
And while that was interesting look how we instantly got some console logs in here.

73
00:05:41,330 --> 00:05:42,670
It looks like a reducer.

74
00:05:42,680 --> 00:05:47,840
As we've mentioned many times previously whenever our reduce or seeing our application first boots up

75
00:05:47,840 --> 00:05:54,560
in redux first starts up it runs all of our reducers at least one time to assemble some type of initial

76
00:05:54,560 --> 00:05:55,990
state for our application.

77
00:05:56,180 --> 00:06:03,740
So this is that kind of boot up action that's coming through here now Ishmael to tap on any row here

78
00:06:04,190 --> 00:06:07,120
and see an action flow through that reducer.

79
00:06:07,160 --> 00:06:15,560
And in fact I do I get an action of type select library and it appears to have a payload attached to

80
00:06:15,560 --> 00:06:17,720
it which should be the ID of the library.

81
00:06:17,720 --> 00:06:18,890
I just clicked on.

82
00:06:18,950 --> 00:06:21,210
So with and had an idea of zero.

83
00:06:21,230 --> 00:06:23,520
If I click on it I get a payload of zero.

84
00:06:23,590 --> 00:06:29,270
Yep and then actually is at the very end has a payload of 8 because it has ID of 8.

85
00:06:29,840 --> 00:06:30,400
Awesome.

86
00:06:30,410 --> 00:06:32,020
This looks perfect right here.

87
00:06:32,030 --> 00:06:38,270
The last thing we have to do now that we are receiving this action inside a reducer is make sure that

88
00:06:38,270 --> 00:06:45,410
our douceur watches for an action of type select library and whenever it sees that it should return

89
00:06:45,710 --> 00:06:47,510
the selected library's.

90
00:06:47,600 --> 00:06:53,820
And that way this reduce or will create the selected library ID piece of state.

91
00:06:53,830 --> 00:06:56,030
So let's take care of that in the next section.