1
00:00:01,589 --> 00:00:05,550
All right, let's take care of part two of making sure that we communicate some type information over

2
00:00:05,550 --> 00:00:10,620
to react redux, once again, we're going to be essentially doing what it says inside the official documentation

3
00:00:10,620 --> 00:00:11,830
to apply some type stuff.

4
00:00:12,180 --> 00:00:16,379
So a lot of this code is going to be kind of confusing, kind of weird, going to feel a little bit

5
00:00:16,379 --> 00:00:16,880
awkward.

6
00:00:16,890 --> 00:00:19,020
But again, it's just kind of what we have to write out.

7
00:00:19,500 --> 00:00:25,410
So to get started inside my hoax directory, I'm going to make a new file called Use Typed Selecter

8
00:00:26,100 --> 00:00:26,940
Thoughts.

9
00:00:28,080 --> 00:00:30,720
Then inside of here, we are going to import.

10
00:00:32,200 --> 00:00:33,250
Use selector.

11
00:00:34,150 --> 00:00:34,840
And.

12
00:00:35,980 --> 00:00:39,070
Height use selector, OK?

13
00:00:39,970 --> 00:00:41,650
From React Redux.

14
00:00:43,740 --> 00:00:45,210
I'm also going to import.

15
00:00:47,060 --> 00:00:52,880
That route state type that we just put together moments ago from up one directory state.

16
00:00:54,480 --> 00:00:57,450
And then finally, I'm going to export const.

17
00:00:58,420 --> 00:01:00,250
Use tight selector.

18
00:01:01,390 --> 00:01:08,410
I'm going to put on a type connotation to it of tight use selector hook angle brackets.

19
00:01:09,350 --> 00:01:11,750
Route state equals.

20
00:01:12,790 --> 00:01:14,290
Use selector.

21
00:01:15,180 --> 00:01:18,030
Yeah, I it just feels awkward.

22
00:01:18,970 --> 00:01:23,530
I'm pretty convinced there's a better way to do this, but this is what the documentation says, and

23
00:01:23,530 --> 00:01:28,990
in general, I like to kind of stick with the documentation now rather than ever using use selector

24
00:01:28,990 --> 00:01:31,200
to try to get some state out of our store.

25
00:01:31,330 --> 00:01:34,420
We're going to instead use this thing called Use Typed Selector.

26
00:01:34,990 --> 00:01:39,300
Its name is just meant to imply that, well, this has some type information applied to it.

27
00:01:39,610 --> 00:01:42,490
We do not really have to call this use type selector.

28
00:01:42,490 --> 00:01:46,180
We could call it use selector and then just import this thing up here as something else.

29
00:01:46,390 --> 00:01:49,780
If you don't like having to and use type selector, that's personally what I do.

30
00:01:49,810 --> 00:01:54,880
I personally rename U selector to just something like as underscore U selector.

31
00:01:56,270 --> 00:02:02,500
And then use that over here and now I can call the thing that I export use selector.

32
00:02:03,250 --> 00:02:06,920
So now I don't even really have to worry about the fact that I'm using use type selector, because that's

33
00:02:06,920 --> 00:02:07,990
just kind of an awkward name.

34
00:02:08,000 --> 00:02:09,639
So if you want to do this, totally fine.

35
00:02:09,680 --> 00:02:14,510
But again, documentation is going to say something closer to what I had to start with, something like

36
00:02:14,510 --> 00:02:15,080
this right here.

37
00:02:16,920 --> 00:02:21,000
OK, so now we're going to go back over to our component, and instead of making use of use selector,

38
00:02:21,180 --> 00:02:23,580
we're going to use use type selector.

39
00:02:25,010 --> 00:02:29,900
Tobacco over inside of our components, I'm going to delete the import for you selector and instead

40
00:02:29,900 --> 00:02:32,180
get use typed selector.

41
00:02:33,710 --> 00:02:36,710
From Hooke's use type selector.

42
00:02:37,700 --> 00:02:41,000
And then I'll use that thing in place of you selecter right here.

43
00:02:44,200 --> 00:02:51,130
It's now somewhat magically, if I hover overstates it correctly describes or is annotated as the type

44
00:02:51,130 --> 00:02:53,370
of state inside of our reduc store.

45
00:02:53,950 --> 00:03:00,130
So it's something that has a repositories key that points at some object that satisfies the interface

46
00:03:00,130 --> 00:03:01,480
of repositories state.

47
00:03:02,350 --> 00:03:07,780
Now, I can very easily take a look at state DOT repositories, return that entire object and then structure

48
00:03:07,780 --> 00:03:09,790
out of it data error and loading.

49
00:03:10,120 --> 00:03:14,440
And if you mouseover data and loading, you'll notice that they all have the correct type annotations

50
00:03:14,440 --> 00:03:14,800
on them.

51
00:03:15,460 --> 00:03:17,110
So data is an array of strings.

52
00:03:17,140 --> 00:03:20,230
There is string or null and loading is a boolean.

53
00:03:21,690 --> 00:03:27,420
So that's it again, I know this like this video and the last one, I really wish that I could make

54
00:03:27,420 --> 00:03:30,060
a little bit more compelling and wish I could better explain what's going on.

55
00:03:30,270 --> 00:03:32,320
But there's kind of not a lot to say beyond.

56
00:03:32,490 --> 00:03:35,550
Well, this is what we've got to do to communicate some type information over.

57
00:03:36,000 --> 00:03:40,680
So I apologize for kind of whining about this a little bit, but it's just kind of a sore spot for me

58
00:03:40,680 --> 00:03:45,870
just because, again, I feel like some of these libraries kind of make typescript integration just

59
00:03:45,870 --> 00:03:47,940
a little bit unnecessarily difficult.

60
00:03:48,690 --> 00:03:52,110
But that's just life is just what we have to deal with in the JavaScript world.

61
00:03:52,870 --> 00:03:54,270
Anyways, back on topic.

62
00:03:54,540 --> 00:03:58,100
So last thing I have to do is make use of data er and loading inside this component.

63
00:03:58,320 --> 00:03:59,730
Let's take care of that in just a moment.