1
00:00:01,030 --> 00:00:04,960
We've got our Selous component set up, so they're not going to hook this thing up to our reduc store,

2
00:00:04,960 --> 00:00:08,640
pulls some state out and render a list of cells if we do so.

3
00:00:08,650 --> 00:00:10,270
However, just a really quick reminder.

4
00:00:10,360 --> 00:00:14,740
You might recall back when we covered Redux a long time ago, at the start of the course, we created

5
00:00:14,740 --> 00:00:16,090
a typed selecter.

6
00:00:16,450 --> 00:00:21,910
The by default, if we make use of the use selector hook from react redux, we don't get any type things

7
00:00:21,910 --> 00:00:23,110
coming out of our reduc store.

8
00:00:23,110 --> 00:00:25,720
In other words, we don't know what type of data we are accessing.

9
00:00:26,210 --> 00:00:31,210
So you might recall that we had to create a typed selector that pretty much just came down to writing

10
00:00:31,210 --> 00:00:32,229
out a new hook.

11
00:00:32,390 --> 00:00:36,970
We had to write a little bit of mystery code inside there just to help react redux, understand the

12
00:00:36,970 --> 00:00:38,600
type of data inside of our store.

13
00:00:39,130 --> 00:00:40,540
So in other words, we have to do that.

14
00:00:40,540 --> 00:00:42,640
Just a little bit of administrative work.

15
00:00:42,820 --> 00:00:43,810
Let's do it right now.

16
00:00:44,560 --> 00:00:48,160
Inside my SAAC directory, I'm going to create a new folder called Hooke's.

17
00:00:48,670 --> 00:00:51,400
And then inside there, I'll make a new file called.

18
00:00:52,650 --> 00:00:55,980
New file, there we go, use typed selecter.

19
00:00:58,410 --> 00:00:58,970
It's.

20
00:01:00,530 --> 00:01:08,990
Then inside of here, we'll import use selecter and tight use selector hook from React Redux.

21
00:01:10,790 --> 00:01:15,410
We'll get our route state type from up one directory state.

22
00:01:18,820 --> 00:01:26,080
And then finally, that little mysterious bit of code, so it ends up being export const use typed selecter.

23
00:01:28,750 --> 00:01:36,490
Colin typed use selector hook angle brackets we're going to put in root state inside their.

24
00:01:37,540 --> 00:01:39,400
Equals use selecter.

25
00:01:41,440 --> 00:01:45,940
OK, so now whenever we want to access any state instead of a component, we're going to use our use

26
00:01:45,940 --> 00:01:50,490
type selector and this thing is going to understand the type of data that is stored inside of our store.

27
00:01:51,970 --> 00:01:55,000
All right, so let's go back over to our cell list component.

28
00:01:56,550 --> 00:02:01,140
And we'll go ahead and import that hook at the very top, it will do and import.

29
00:02:02,310 --> 00:02:04,140
Use typed selecter.

30
00:02:06,150 --> 00:02:10,020
From up on directory, folks use typed selecter.

31
00:02:12,430 --> 00:02:13,960
Now, inside of our component itself.

32
00:02:16,090 --> 00:02:22,540
If we just call use type selector and pass in an arrow function, we can add in a state argument to

33
00:02:22,540 --> 00:02:24,820
it, I'm going to write out to state like so.

34
00:02:24,820 --> 00:02:30,250
And if I mouse over state, it's going to correctly display the type of data that is stored inside of

35
00:02:30,250 --> 00:02:30,940
our reduc store.

36
00:02:31,300 --> 00:02:33,910
So we get all that cells related stuff inside there.

37
00:02:34,480 --> 00:02:36,240
Looks like it definitely worked as expected.

38
00:02:36,970 --> 00:02:41,680
Now that we've got the ability to get some state inside of our component, we need to think about what

39
00:02:41,680 --> 00:02:43,630
state we actually need to pull out.

40
00:02:44,500 --> 00:02:51,190
Remember, inside of our cells reducer right now, we have the data object that has essentially a collection

41
00:02:51,190 --> 00:02:52,370
of all of our different cells.

42
00:02:52,930 --> 00:02:57,460
We also have the order object that tells us the order of cells and the order they should be printed

43
00:02:57,460 --> 00:03:00,100
out on the screen, the inside of cell list.

44
00:03:00,250 --> 00:03:05,020
We really have to create a selector that is going to attempt to get data and order and then kind of

45
00:03:05,020 --> 00:03:09,230
merge the two together into some appropriately ordered list of cells.

46
00:03:10,120 --> 00:03:13,270
So let's take care of this little piece of logic in the next video.