1
00:00:00,870 --> 00:00:04,980
We've now wrapped up the portion of our application that calls for some amount of list building.

2
00:00:05,130 --> 00:00:06,200
So here's our list.

3
00:00:06,210 --> 00:00:07,430
We can see all the items.

4
00:00:07,440 --> 00:00:11,990
And in theory if we had a whole bunch of them we could scroll through and have a really good time.

5
00:00:12,210 --> 00:00:14,010
So that side of things looks pretty good.

6
00:00:14,010 --> 00:00:19,590
We're going to pivot a little bit now and focus on how to handle a user tapping on a single row.

7
00:00:19,980 --> 00:00:26,100
So remember the goal of the application whenever a user taps on a row that rows should expand with a

8
00:00:26,100 --> 00:00:31,830
nice animation and show the users some details about that very particular library.

9
00:00:31,860 --> 00:00:36,120
So if you recall much earlier we discussed how we were going to plan out the different reducers in our

10
00:00:36,120 --> 00:00:41,790
application we were going to have one library reducer which we've already created and then we were also

11
00:00:41,790 --> 00:00:44,090
going to have a selection reducer.

12
00:00:44,400 --> 00:00:51,280
And the purpose of the selection reducer is just to record what the currently selected library is.

13
00:00:51,300 --> 00:00:54,110
Each library has an ID attached to it.

14
00:00:54,120 --> 00:00:59,880
So this lecture and user can just record the currently selected ID and everything should work out just

15
00:00:59,880 --> 00:01:00,960
fine.

16
00:01:00,960 --> 00:01:05,990
So in this section we're going to start by working on the selection reducer.

17
00:01:06,180 --> 00:01:09,060
Remember the process for creating a new reducer.

18
00:01:09,090 --> 00:01:13,220
They always go into their own separate file inside of our redos folder.

19
00:01:13,410 --> 00:01:20,180
So in the reducers folder I'll create a new file called selection reducer.

20
00:01:20,490 --> 00:01:27,770
J.S. then inside of your we need to declare you know basically our starting reducer.

21
00:01:28,010 --> 00:01:36,830
So I will export default a federal function in this federal function is going to serve as a producer.

22
00:01:36,830 --> 00:01:42,350
Now we need to have some like initial state for this application we need to have some initial value

23
00:01:42,410 --> 00:01:46,940
that the reducer will return when our redux first boots up.

24
00:01:46,940 --> 00:01:51,140
One thing that I haven't really mentioned quite in depth the end about this initial value is that it

25
00:01:51,140 --> 00:01:53,140
cannot be undefined.

26
00:01:53,150 --> 00:01:58,640
So in previous sections when we created that library reducer and we had that kind of like you know done

27
00:01:58,640 --> 00:02:00,860
you reduce are in there that would always return an array.

28
00:02:01,070 --> 00:02:07,790
I was returning an array just to make sure that we didn't not return undefined redux as set up to assume

29
00:02:07,790 --> 00:02:12,260
that if you return an undefined Romary douceur you probably made a mistake.

30
00:02:12,260 --> 00:02:16,460
So we always have to return a value that is not undefined.

31
00:02:16,520 --> 00:02:20,330
So to start we'll just return know hey that works.

32
00:02:20,330 --> 00:02:21,550
It is not undefined.

33
00:02:21,620 --> 00:02:27,440
So it satisfies that requirement and makes sure that in the case that we call this thing at any point

34
00:02:27,440 --> 00:02:32,720
in time when the application first boots up we do not want to have a pre-selected row.

35
00:02:32,900 --> 00:02:38,010
So we don't want to default to say a id of one or ID 2 or anything like that.

36
00:02:38,030 --> 00:02:42,800
So I will say just no we do not currently have a row selected.

37
00:02:43,660 --> 00:02:44,260
Okay.

38
00:02:44,390 --> 00:02:47,980
Our reduced her is pretty much good enough to wire it up.

39
00:02:48,140 --> 00:02:53,740
So lets now flip over to our index not J.S. file inside the reducers directory.

40
00:02:54,020 --> 00:02:59,530
Remember that for every reducer we create we have to wire it up to this combined reducers call.

41
00:02:59,540 --> 00:03:10,280
So inside of the index not J.S. I will import selection or reduce or from selection reducer and now

42
00:03:10,280 --> 00:03:13,760
I need to add it into my combine reducers call.

43
00:03:13,910 --> 00:03:19,910
Remember the really important thing about combine reducers whatever key I provide in here for this selection

44
00:03:19,910 --> 00:03:24,450
reducer is how this property will show up on my state object.

45
00:03:24,560 --> 00:03:30,100
So I'm going to say that I want to have a property in my state object called How About You know I think

46
00:03:30,110 --> 00:03:34,150
I've got in a couple of diagrams here what did I use select a library ID.

47
00:03:34,190 --> 00:03:40,520
Let's go with that so another piece of state called selected library ID.

48
00:03:41,150 --> 00:03:43,330
Whoops there we go.

49
00:03:43,730 --> 00:03:50,900
And the value of this piece of state will be generated by my selection reducer.

50
00:03:50,960 --> 00:03:57,980
So now in my application first fruits of the lecture inducer will or will execute exactly one time and

51
00:03:57,980 --> 00:04:01,570
by default it will just return nil or as you.

52
00:04:01,760 --> 00:04:05,550
So by default we do not have a selected library.

53
00:04:05,640 --> 00:04:12,540
OK let's now flip back over to our list item components.

54
00:04:13,190 --> 00:04:18,860
This list item component here needs to know about whether or not it is currently selected which means

55
00:04:19,070 --> 00:04:22,940
this list item component needs to get access to our redirect state.

56
00:04:23,210 --> 00:04:29,360
Once we get access to redux state inside this component we can compare the value of that selected library

57
00:04:29,360 --> 00:04:36,740
ID to this start Propst library ID and if they are equal that means that this particular library is

58
00:04:36,740 --> 00:04:38,210
currently selected.

59
00:04:38,210 --> 00:04:39,680
So that will be our next step.

60
00:04:39,800 --> 00:04:41,660
Let's take care of that in the next section