1
00:00:00,980 --> 00:00:05,480
We need to get access to some state that is stored instead of our reduc store inside of our repositories

2
00:00:05,480 --> 00:00:11,000
list component to do so, we're going to use another hook from the reactor redox library at the very

3
00:00:11,000 --> 00:00:11,320
top.

4
00:00:11,330 --> 00:00:16,040
I will import use selector from REACT Redux.

5
00:00:16,970 --> 00:00:21,950
This hook is similar in nature to the map, state to proper function that you might be used to if you

6
00:00:21,950 --> 00:00:25,220
have ever made use of Class-Based components before.

7
00:00:26,060 --> 00:00:32,659
So as a very quick example of how we use this hook, we could write out inside of your state is use

8
00:00:32,659 --> 00:00:33,380
selecter.

9
00:00:34,720 --> 00:00:40,050
I'm then going to call that with a function that is going to receive all the state out of our reduc

10
00:00:40,060 --> 00:00:45,400
store and I'm going to call that simply state and then going to immediately return it from that function.

11
00:00:46,410 --> 00:00:49,650
After that, I will then do a log of whatever we get back.

12
00:00:50,590 --> 00:00:53,130
So let's just run this and see exactly what happens.

13
00:00:55,000 --> 00:00:58,050
I'm going to do a quick refresh and I will immediately see a counsellor.

14
00:00:58,090 --> 00:01:03,820
OK, so this is all the state that isn't outside of our store and of course, has the repositories key

15
00:01:04,060 --> 00:01:06,790
and there's the output from our repositories reducer.

16
00:01:07,120 --> 00:01:10,390
So we have no data original loading of false.

17
00:01:11,580 --> 00:01:16,830
I'm going to try to search for react, so I'll type and react, I'm going to clear my console and do

18
00:01:16,830 --> 00:01:17,400
a search.

19
00:01:18,700 --> 00:01:19,750
Here's my council blog.

20
00:01:20,620 --> 00:01:25,510
I'm going to take a look at the last entry right there, and now I can see my data property has a list

21
00:01:25,510 --> 00:01:28,680
of 20 different packages that we can print up onto the screen.

22
00:01:29,530 --> 00:01:33,270
Naturally, we probably don't want to get this entire repositories piece of state.

23
00:01:33,490 --> 00:01:36,310
We probably just want some individual pieces.

24
00:01:36,700 --> 00:01:40,840
So in other words, inside of our component itself, we don't need this entire design object.

25
00:01:40,990 --> 00:01:44,620
We really just need these pieces of state just loading.

26
00:01:46,380 --> 00:01:47,970
Just air and just data.

27
00:01:49,860 --> 00:01:54,060
So to make sure that we only get those very small pieces of state that we really care about, we can

28
00:01:54,060 --> 00:01:55,890
select some piece of state.

29
00:01:56,220 --> 00:01:58,470
That's what this function right here is really all about.

30
00:01:59,130 --> 00:02:02,550
This function is going to receive our entire state object out of redux.

31
00:02:02,880 --> 00:02:07,230
Then whatever we return from here is what we're going to eventually get out on the other side.

32
00:02:07,860 --> 00:02:11,970
So, again, you can really think of this as being very similar to the map state to function.

33
00:02:13,120 --> 00:02:17,530
So in our case, all we really care about is state dot repositories.

34
00:02:17,800 --> 00:02:18,240
That's it.

35
00:02:18,250 --> 00:02:19,720
We don't really care about anything else.

36
00:02:20,230 --> 00:02:23,630
But as soon as we add that in, unfortunately, we get a little error message.

37
00:02:24,280 --> 00:02:25,480
So what's going on here?

38
00:02:25,900 --> 00:02:30,820
Well, for just a moment, I'm going to first annotate State as any I just want to make sure that this

39
00:02:30,820 --> 00:02:33,700
code works and we'll start to approach the typescript side of things.

40
00:02:34,660 --> 00:02:35,800
So I'm going to say this now.

41
00:02:36,750 --> 00:02:42,390
Back over now, if I refresh, I will see that now we are only getting that repositories piece of state.

42
00:02:42,400 --> 00:02:44,380
So just loading air and data.

43
00:02:45,320 --> 00:02:53,030
It's now just really quickly, we can structure out data air and loading and then eventually make use

44
00:02:53,030 --> 00:02:55,160
of those different properties inside of our component.

45
00:02:55,500 --> 00:03:00,260
But before we do so, we probably, of course, want to understand why are we seeing an error message

46
00:03:00,260 --> 00:03:02,210
whenever we try to reference repositories?

47
00:03:02,780 --> 00:03:06,380
Well, I'm going to remove that type imitation of any really quickly and then we'll take a look at the

48
00:03:06,380 --> 00:03:07,190
error message again.

49
00:03:07,830 --> 00:03:12,500
So I'm going to hover over repositories and you'll notice that says property repositories does not exist

50
00:03:12,500 --> 00:03:15,260
on type default route state.

51
00:03:16,770 --> 00:03:22,560
So this right here is a little bit of a pain point around using the React Redux library whenever you

52
00:03:22,560 --> 00:03:24,030
make use of use selector.

53
00:03:25,040 --> 00:03:31,110
You selecter really has no idea whatsoever about what type of data is inside of your reduc store.

54
00:03:31,370 --> 00:03:37,160
No information right now is being communicated to TypeScript from our kind of redock side of things

55
00:03:37,370 --> 00:03:39,710
over to this react redux side of things.

56
00:03:40,310 --> 00:03:46,220
So you and I have to write in a little bit of additional code to help react redux, understand what

57
00:03:46,220 --> 00:03:49,670
type of data or really what type this argument is right here.

58
00:03:50,390 --> 00:03:54,680
This extra little bit of code is just a little bit frustrating to have to write because it's a little

59
00:03:54,680 --> 00:03:56,630
confusing exactly what we have to do.

60
00:03:56,810 --> 00:04:00,140
And it kind of feels like something that should be kind of done behind the scenes automatically.

61
00:04:00,330 --> 00:04:03,290
Unfortunately, automating this process would be really challenging.

62
00:04:03,560 --> 00:04:07,940
So this is why you and I have to write out just a little bit of additional code to get everything working

63
00:04:07,940 --> 00:04:08,690
as expected.

64
00:04:09,230 --> 00:04:10,340
So let's take a pause right here.

65
00:04:10,340 --> 00:04:11,240
Come back the next video.

66
00:04:11,390 --> 00:04:15,350
We're going to write out this additional little bit of code and really understand what it is doing behind

67
00:04:15,350 --> 00:04:15,890
the scenes.