1
00:00:00,150 --> 00:00:03,120
- The next hook I wanna talk
about is the use reducer hook.

2
00:00:03,120 --> 00:00:06,000
This isn't really anything
specifically about React

3
00:00:06,000 --> 00:00:07,620
but it's a nice little TypeScript trick

4
00:00:07,620 --> 00:00:09,270
that I can teach you that's
going to help you out

5
00:00:09,270 --> 00:00:10,560
with reducers a lot.

6
00:00:10,560 --> 00:00:11,700
So you can see here I have my code,

7
00:00:11,700 --> 00:00:13,860
everything's working just
fine, but I don't have any

8
00:00:13,860 --> 00:00:16,290
of the TypeScript set
up for this actual code.

9
00:00:16,290 --> 00:00:17,970
As you can see here, I can take in a state

10
00:00:17,970 --> 00:00:19,650
and I can take in an action

11
00:00:19,650 --> 00:00:22,020
and my state is obviously
just whatever the state

12
00:00:22,020 --> 00:00:23,730
of my actual hook down
here is going to be.

13
00:00:23,730 --> 00:00:25,920
So here you can see right
now my state is any,

14
00:00:25,920 --> 00:00:28,530
that's just because I haven't
actually typed my state yet.

15
00:00:28,530 --> 00:00:29,400
So let's just come in here.

16
00:00:29,400 --> 00:00:31,590
We'll create a type that's for our state

17
00:00:31,590 --> 00:00:34,740
and we'll just say our count
is going to be a number.

18
00:00:34,740 --> 00:00:36,480
And then what we can do is we can specify

19
00:00:36,480 --> 00:00:38,010
that type right here.

20
00:00:38,010 --> 00:00:39,480
And you'll notice we're
now getting an error

21
00:00:39,480 --> 00:00:40,560
on our use reducer.

22
00:00:40,560 --> 00:00:41,430
The reason for that is

23
00:00:41,430 --> 00:00:44,250
because our reducer here
doesn't always return our state.

24
00:00:44,250 --> 00:00:45,720
If we hover over it,
you can see it returns

25
00:00:45,720 --> 00:00:48,840
either a count with a type
of anything or undefined.

26
00:00:48,840 --> 00:00:50,460
And that's 'cause we
don't have a default case

27
00:00:50,460 --> 00:00:51,810
where we return our state.

28
00:00:51,810 --> 00:00:54,420
So we wanna probably add in a
default case inside of here.

29
00:00:54,420 --> 00:00:57,300
And this default could just
return our state as is,

30
00:00:57,300 --> 00:00:58,500
or more than likely we want

31
00:00:58,500 --> 00:00:59,940
to maybe throw some type of error.

32
00:00:59,940 --> 00:01:04,470
So we could just say
like throw a new error,

33
00:01:04,470 --> 00:01:06,000
essentially saying that we have a type

34
00:01:06,000 --> 00:01:07,380
but we're not actually using it properly.

35
00:01:07,380 --> 00:01:08,790
Doesn't really matter what you do here,

36
00:01:08,790 --> 00:01:10,440
you shouldn't ever hit this default case

37
00:01:10,440 --> 00:01:12,420
if you're properly using TypeScript.

38
00:01:12,420 --> 00:01:14,280
So the next thing we need
to do is specify our action,

39
00:01:14,280 --> 00:01:16,080
'cause we hover over our
state, it gets our count

40
00:01:16,080 --> 00:01:17,130
but it has a type of any

41
00:01:17,130 --> 00:01:19,680
'cause it doesn't know
what this actions type is.

42
00:01:19,680 --> 00:01:20,970
So let's come in here,

43
00:01:20,970 --> 00:01:23,040
we're gonna give a type for our action.

44
00:01:23,040 --> 00:01:25,290
And we know that our
action has multiple things.

45
00:01:25,290 --> 00:01:27,690
First of all, we have a
type which is a string

46
00:01:27,690 --> 00:01:29,910
and then we also have this increase by

47
00:01:29,910 --> 00:01:31,383
which is going to be a number.

48
00:01:31,383 --> 00:01:35,373
And we also have this decrease
by which is also a number.

49
00:01:36,300 --> 00:01:37,260
There we go.

50
00:01:37,260 --> 00:01:39,540
So we can type our action just like that

51
00:01:39,540 --> 00:01:40,830
but now we're getting an error down here

52
00:01:40,830 --> 00:01:43,170
because it's saying I need
to pass both increase by

53
00:01:43,170 --> 00:01:45,210
and decrease by so obviously I need

54
00:01:45,210 --> 00:01:46,260
to make sure these are optional

55
00:01:46,260 --> 00:01:48,750
so I don't pass down both
of these, there we go.

56
00:01:48,750 --> 00:01:50,100
But now we're again getting more errors

57
00:01:50,100 --> 00:01:51,330
because it's saying, "Hey, I don't know

58
00:01:51,330 --> 00:01:53,737
if I have an increase by
when my type is increment."

59
00:01:53,737 --> 00:01:55,611
So instead of doing this
where you try to put all

60
00:01:55,611 --> 00:01:57,333
of your different types
together like this,

61
00:01:57,333 --> 00:01:59,100
what you wanna do is you
wanna break out your type

62
00:01:59,100 --> 00:02:02,070
into individual different
actions based on each type.

63
00:02:02,070 --> 00:02:05,040
So we have one type where our
type is specifically the value

64
00:02:05,040 --> 00:02:06,690
of increment and in that case,

65
00:02:06,690 --> 00:02:08,820
we need to pass along our increase by.

66
00:02:08,820 --> 00:02:11,389
Then we're going to combine
this here using this

67
00:02:11,389 --> 00:02:13,140
or operator right here.

68
00:02:13,140 --> 00:02:15,270
And we're saying we now have another type

69
00:02:15,270 --> 00:02:17,643
and this type is going
to be for decrement.

70
00:02:18,660 --> 00:02:19,770
There we go.

71
00:02:19,770 --> 00:02:22,500
And we're gonna pass along
the decrease by value

72
00:02:22,500 --> 00:02:24,720
which is a number just like that.

73
00:02:24,720 --> 00:02:26,850
So now I'm saying it's either
going to be this first type

74
00:02:26,850 --> 00:02:29,850
of increment or this
second type of decrement.

75
00:02:29,850 --> 00:02:31,680
Now you'll notice we
have no errors at all.

76
00:02:31,680 --> 00:02:33,900
And the really nice thing is
I get perfect auto complete.

77
00:02:33,900 --> 00:02:36,330
So if I come down here, if
I have a type of decrement,

78
00:02:36,330 --> 00:02:38,220
you'll notice it only
says that the decrease

79
00:02:38,220 --> 00:02:40,230
by value is the only thing I can pass.

80
00:02:40,230 --> 00:02:43,590
So if I put in a decrease
by of two into here,

81
00:02:43,590 --> 00:02:45,420
every time I hit minus,
you now see it goes down

82
00:02:45,420 --> 00:02:47,130
by two instead of one.

83
00:02:47,130 --> 00:02:49,110
And you also notice
when I check for my case

84
00:02:49,110 --> 00:02:51,540
of my type being increment,
you notice my auto complete

85
00:02:51,540 --> 00:02:54,090
for my action gives me both
the increased by in the type

86
00:02:54,090 --> 00:02:56,220
because it knows that
if my type is increment,

87
00:02:56,220 --> 00:02:59,550
the only property available
is the increase by property.

88
00:02:59,550 --> 00:03:01,020
So be using this union operator,

89
00:03:01,020 --> 00:03:03,330
by combining together all
these different types,

90
00:03:03,330 --> 00:03:04,740
we're essentially saying,
"Hey, I'm either going

91
00:03:04,740 --> 00:03:07,170
to be a type increment
or a type decrement.

92
00:03:07,170 --> 00:03:09,780
And if I'm type increment, I
have these specific properties

93
00:03:09,780 --> 00:03:12,420
and if I'm decrement, I have
these specific properties.

94
00:03:12,420 --> 00:03:14,520
And you can do this for every
single case that you have

95
00:03:14,520 --> 00:03:16,200
for a different type that you can pass in,

96
00:03:16,200 --> 00:03:17,220
do a different action,

97
00:03:17,220 --> 00:03:18,750
and that action can
have all the properties

98
00:03:18,750 --> 00:03:19,860
it needs defined on it.

99
00:03:19,860 --> 00:03:21,930
And by doing this, you're gonna
get really good type safety

100
00:03:21,930 --> 00:03:24,870
that makes sure you never pass
along the wrong properties

101
00:03:24,870 --> 00:03:26,280
and it makes sure you're always passing

102
00:03:26,280 --> 00:03:29,070
along all the properties that
you need for a specific type.

103
00:03:29,070 --> 00:03:31,620
Again, this isn't really
something that's specific to React

104
00:03:31,620 --> 00:03:33,270
but it's a really great way to do this.

105
00:03:33,270 --> 00:03:34,620
And if you have everything
set up like this,

106
00:03:34,620 --> 00:03:35,880
the nice thing is your use reducer

107
00:03:35,880 --> 00:03:37,140
will automatically infer your type.

108
00:03:37,140 --> 00:03:38,700
So you can see here our state is account

109
00:03:38,700 --> 00:03:40,140
with a number and our dispatch is

110
00:03:40,140 --> 00:03:42,390
essentially a thing that
takes in our action.