1
00:00:01,320 --> 00:00:05,730
You and I know very well because we've done a ton of design work and we wrote out the code for it and

2
00:00:05,730 --> 00:00:10,550
we just saw a console a moment ago, we know really well the structure of data inside of our Redock

3
00:00:10,560 --> 00:00:10,920
store.

4
00:00:11,310 --> 00:00:16,620
We know that our state is an object that has a repositories key that points out another object that

5
00:00:16,620 --> 00:00:18,550
has a data loading and air property.

6
00:00:18,600 --> 00:00:20,520
Again, we just saw council logs of this.

7
00:00:21,070 --> 00:00:25,170
However, unfortunately, React Redux is not aware of this information.

8
00:00:25,320 --> 00:00:28,350
It doesn't know about the type of data inside of our store.

9
00:00:28,830 --> 00:00:33,570
And that is why if we take a look at our hook of you, select a right here and we mouse over state's

10
00:00:34,020 --> 00:00:39,060
default route state that being applied as the default type of state really can be interpreted as meaning

11
00:00:39,270 --> 00:00:44,960
react Redux has no idea what the type of data is inside of our Redock store.

12
00:00:45,210 --> 00:00:46,600
That's what this really means right here.

13
00:00:47,100 --> 00:00:52,020
So in this video, we're going to do a little bit of work to first programmatically figure out what

14
00:00:52,020 --> 00:00:54,510
the type of our data is inside of our Reduc store.

15
00:00:54,900 --> 00:00:58,530
We're then going to communicate that information over to react redux.

16
00:00:59,130 --> 00:01:02,460
Now, a lot of the code that we're going to write in this video is probably going to be just a little

17
00:01:02,460 --> 00:01:03,240
bit frustrating.

18
00:01:03,840 --> 00:01:05,099
I'll be honest with you.

19
00:01:06,100 --> 00:01:10,390
Just about everything that we are going to write is coming straight from the React Redux documentation,

20
00:01:10,660 --> 00:01:13,200
so I'm at React Redux documentation for it.

21
00:01:13,210 --> 00:01:17,740
I'm inside of these static typing section and there's some directions inside of here on how you can

22
00:01:17,740 --> 00:01:20,180
get react redux working really nicely with TypeScript.

23
00:01:20,590 --> 00:01:26,380
The reason I say that this stuff is frustrating is that sometimes react redux, redux and redux, Thunk

24
00:01:26,380 --> 00:01:31,630
and several other redux related libraries just kind of feel like they don't work that well with type

25
00:01:31,630 --> 00:01:34,800
scripts, which I personally find just a little bit frustrating.

26
00:01:34,810 --> 00:01:35,560
But that's life.

27
00:01:35,830 --> 00:01:39,160
All I mean to say here is we're pretty much following the documentation.

28
00:01:39,160 --> 00:01:44,590
And if what we were about to write feels weird or strange, well, unfortunately, it's just because

29
00:01:44,800 --> 00:01:45,640
this is how I react.

30
00:01:45,640 --> 00:01:46,630
Redux is set up.

31
00:01:46,930 --> 00:01:47,530
It's life.

32
00:01:47,920 --> 00:01:49,840
So let's just deal with it.

33
00:01:50,230 --> 00:01:51,070
Long story short.

34
00:01:52,000 --> 00:01:58,600
OK, so the first thing we have to do is create a new type that describes the type of data inside of

35
00:01:58,600 --> 00:01:59,370
our reduc store.

36
00:01:59,410 --> 00:02:00,340
That's what we're about to do.

37
00:02:00,940 --> 00:02:05,350
So for that, we're going to go into our state reducers index dots file.

38
00:02:06,420 --> 00:02:09,330
Remember, we call combined reducers right here.

39
00:02:10,449 --> 00:02:15,640
This means or really this entire statement means that our state inside of a reduc store is going to

40
00:02:15,640 --> 00:02:18,310
be an object that has a repository, repositories key.

41
00:02:19,300 --> 00:02:25,330
And the value for that is going to come from our repositories, reducer repositories reducer is a function

42
00:02:25,330 --> 00:02:30,220
you and I put together and we applied a return type invitation to it of Repository State.

43
00:02:30,530 --> 00:02:35,740
So TypeScript is 100 percent aware of exactly what is coming out of that reducer.

44
00:02:36,400 --> 00:02:42,970
TypeScript is also 100 percent aware that the overall state coming or being stored inside of our store

45
00:02:42,970 --> 00:02:45,880
redock store is going to pretty much look like this right here.

46
00:02:46,650 --> 00:02:48,100
So we're going to kind of codify that.

47
00:02:48,100 --> 00:02:52,450
We're going to create a new type that very accurately just says here is the type of data inside of a

48
00:02:52,450 --> 00:02:53,050
reduc store.

49
00:02:54,330 --> 00:02:59,070
For that, at the very bottom of this file, I'm going to export a type called Route St..

50
00:03:00,720 --> 00:03:07,770
And we're going to assign this type return type angle brackets type of reducers.

51
00:03:09,000 --> 00:03:13,200
So this is where, like I said, we have to write out a little bit of code that's kind of like, is

52
00:03:13,200 --> 00:03:14,620
this really the best way to do this?

53
00:03:15,060 --> 00:03:16,470
Is it kind of feels a bit strange.

54
00:03:16,860 --> 00:03:19,230
But again, it's just kind of what we have to deal with.

55
00:03:19,770 --> 00:03:25,500
The way we pretty much interpret this is is kind of saying, OK, we're creating some reducers thing

56
00:03:25,500 --> 00:03:26,000
right here.

57
00:03:26,010 --> 00:03:27,450
This is going to be a function.

58
00:03:27,900 --> 00:03:31,650
Whenever we call that function, it's going to internally call some of our different reducers, give

59
00:03:31,650 --> 00:03:35,580
us back some object that has a structure that kind of looks like this right here.

60
00:03:36,780 --> 00:03:42,870
So we are making use of a built in helper inside of typescript to say, take this function and give

61
00:03:42,870 --> 00:03:45,810
us back the type of whatever that function returns.

62
00:03:46,750 --> 00:03:51,520
We're then going to assign that type to Route States Snappily Mouse over Route St. We'll see that it

63
00:03:51,520 --> 00:03:55,340
accurately describes the type of data that's going to be inside of our store.

64
00:03:55,390 --> 00:03:57,760
We're going to have an object that has a repositories key.

65
00:03:59,350 --> 00:04:05,140
And the value for that is going to match the interface or satisfy the interface of repositories state.

66
00:04:06,110 --> 00:04:10,400
So, again, we now have a type that describes the type of information inside of our store, I know

67
00:04:10,400 --> 00:04:13,420
I've repeated that several times, but don't make sure that is crystal clear.

68
00:04:14,150 --> 00:04:18,899
So we are now going to make sure that we export this from our entire state directory.

69
00:04:18,950 --> 00:04:21,470
Remember, we've been trying to kind of centralize all of our exports.

70
00:04:21,800 --> 00:04:24,800
It's going to go into our inducts file inside the state directory.

71
00:04:25,910 --> 00:04:28,130
And I'm going to export star from.

72
00:04:29,340 --> 00:04:30,180
Reducers.

73
00:04:33,480 --> 00:04:34,770
OK, so let's kind of step one.

74
00:04:35,410 --> 00:04:36,410
So let's take a pause right here.

75
00:04:36,420 --> 00:04:37,740
We're going to come back to the next video.

76
00:04:37,770 --> 00:04:43,020
Now that we've got this type, we're going to use it to kind of better describe what we are getting

77
00:04:43,020 --> 00:04:43,860
out of use.

78
00:04:43,860 --> 00:04:45,090
Selector back over here.