1
00:00:00,880 --> 00:00:04,630
In this video we're going to do a quick little refactor to our author's douceur.

2
00:00:04,780 --> 00:00:08,170
You want our two action creators that we just put together.

3
00:00:08,170 --> 00:00:12,670
So if your code is not working right now and if it feels like clicking on that button does absolutely

4
00:00:12,670 --> 00:00:13,530
nothing at all.

5
00:00:13,600 --> 00:00:17,570
You might have a very common little bug throughout this course.

6
00:00:17,590 --> 00:00:20,100
We've been defining actions that have a type property.

7
00:00:20,260 --> 00:00:26,260
And in every case we've always assigned a string directly to that type property when there's a extremely

8
00:00:26,260 --> 00:00:31,780
common error that tons of people make including myself when they're first getting started with redux.

9
00:00:31,780 --> 00:00:36,400
Remember the type property right here whatever string we put in it is very important that we put the

10
00:00:36,400 --> 00:00:39,540
exact string inside of the Type property right here.

11
00:00:39,760 --> 00:00:44,980
And the exact same type spelling or the exact same spelling of that string inside of our case statement

12
00:00:45,010 --> 00:00:46,540
inside very douceur.

13
00:00:46,540 --> 00:00:51,100
It is incredibly common for people to accidentally make a little typo inside that string.

14
00:00:51,100 --> 00:00:55,130
So maybe they say sig in as opposed to sign in.

15
00:00:55,210 --> 00:01:00,070
So if you currently are having a problem inside of your program where it seems like you're clicking

16
00:01:00,070 --> 00:01:05,010
on a button does nothing at all double check those strings for the cases.

17
00:01:05,880 --> 00:01:08,740
And then double check the strings inside of your action creators as well.

18
00:01:08,850 --> 00:01:12,490
It's incredibly possible that you might have made a little typo between the two.

19
00:01:12,510 --> 00:01:16,380
Now I told you at the end the last video that we were going to do a little Reflektor here so I'm going

20
00:01:16,380 --> 00:01:21,210
to show you a little technique that we can use to make sure that we don't make any typos in transcription

21
00:01:21,210 --> 00:01:23,980
between our reducers and our action creators.

22
00:01:24,210 --> 00:01:28,770
So to do this refactor and make sure we don't accidentally make any typos are going to create a new

23
00:01:28,770 --> 00:01:33,620
file inside my actions directory and I'm going to call it types.

24
00:01:33,660 --> 00:01:40,610
J.S. then inside of here we're going to define all of the different types that are used inside of our

25
00:01:40,610 --> 00:01:43,070
action creators and producers.

26
00:01:43,130 --> 00:01:51,860
I'll do so by writing out export Konst sign in equals the string sign in and then I'll do the same thing

27
00:01:51,860 --> 00:01:54,090
for sign out as well.

28
00:01:57,500 --> 00:01:58,860
All right so what are we doing here.

29
00:01:58,950 --> 00:02:03,930
Well essentially inside of one single file we are defining all of the strings that can be used inside

30
00:02:03,930 --> 00:02:06,390
of our action creators in our reducers.

31
00:02:06,390 --> 00:02:11,470
So inside of all the action creators producers we are no longer going to refer to plain strings.

32
00:02:11,520 --> 00:02:13,920
Instead we will import these action types.

33
00:02:13,920 --> 00:02:18,880
These variables of sign in and sign out these variables still reference strings.

34
00:02:18,930 --> 00:02:23,460
But the benefit to using variables right here is that if we ever accidently make a typo in the name

35
00:02:23,490 --> 00:02:28,260
of a variable we're going to very quickly see an error message that says like you know if we type inside

36
00:02:28,260 --> 00:02:32,720
of our douceur Let's go back over there right now if we accidentally reference a variable inside of

37
00:02:32,720 --> 00:02:37,220
fear of something like sign in and then leave off like the end or something like that.

38
00:02:37,290 --> 00:02:42,060
We will very quickly see an error message that says something like unknown variable sig in and that

39
00:02:42,060 --> 00:02:46,860
essentially is assigned to you the developer that you probably made a typo around one of your action

40
00:02:46,860 --> 00:02:47,920
types.

41
00:02:47,940 --> 00:02:51,050
So in reality just about nothing here is changing.

42
00:02:51,060 --> 00:02:55,950
We're still using strings to coordinate our types but those strings are being assigned to variables

43
00:02:56,190 --> 00:03:02,070
just because it is easier to find errors when we make spelling or make mistakes in the spelling of a

44
00:03:02,070 --> 00:03:02,810
variable name.

45
00:03:03,940 --> 00:03:06,210
Now just creating this type's file does absolutely nothing.

46
00:03:06,220 --> 00:03:11,140
We have to actually use these variables inside of our reducers interaction creators so to make use of

47
00:03:11,140 --> 00:03:12,270
these two variables right here.

48
00:03:12,280 --> 00:03:19,910
I'm going to first change into my actions index j as file and then at the top I will import sign in

49
00:03:20,450 --> 00:03:28,210
and sign out from the type's file and then for my two types are my two action creatures inside of here

50
00:03:28,480 --> 00:03:32,580
I will remove the plain string and replace it with sign in.

51
00:03:32,710 --> 00:03:35,350
Now I'll do the same thing for sign out down here as well.

52
00:03:35,350 --> 00:03:42,390
Sign out so now we can do the same process inside of our three douceur I can my authorized use or at

53
00:03:42,390 --> 00:03:53,580
the very top I will import sign in and sign out from up one directory actions types

54
00:03:56,490 --> 00:04:03,300
and then I will replace the string right here with sign in and the string right here with sign out.

55
00:04:03,300 --> 00:04:05,580
So again we're still using strings to coordinate this.

56
00:04:05,580 --> 00:04:09,260
The only difference is that these strings are now assigned to variables.

57
00:04:09,420 --> 00:04:13,500
So if you make a typo in the variable name we will see an error message.

58
00:04:13,500 --> 00:04:18,060
Now I'm going to save both files and I'll flip back over the browser and I'll do a quick little test.

59
00:04:19,710 --> 00:04:24,650
So I clicked sign in with Google and I'm kicked into my waterflow.

60
00:04:24,800 --> 00:04:27,540
So I still see the button change successfully I can click sign out.

61
00:04:27,560 --> 00:04:30,960
And that button changes back to the initial state.

62
00:04:30,970 --> 00:04:31,260
All right.

63
00:04:31,270 --> 00:04:33,710
So looks like everything still works the way it did before.

64
00:04:33,730 --> 00:04:38,850
But now if I accidentally make a typo here let's just get a quick idea of what that would look like.

65
00:04:38,950 --> 00:04:43,720
So if I accidentally misspell that type name right there and I go with sin because I just committed

66
00:04:43,720 --> 00:04:49,660
a sin in misspelling the action type I can say this and then I will very quickly get a nice error message

67
00:04:49,660 --> 00:04:55,030
right here that tells me hey I just did something wrong around my author reducer I probably misspelt

68
00:04:55,240 --> 00:04:57,840
a type so I probably need to go and fix that.

69
00:04:57,970 --> 00:04:58,510
And so I wait.

70
00:04:58,530 --> 00:04:59,380
Go back over.

71
00:04:59,440 --> 00:05:03,820
I would see the line that it was talking about right here and I would say oh OK I made a mistake I made

72
00:05:03,850 --> 00:05:06,310
a misspelling or a typo inside of my type.

73
00:05:06,310 --> 00:05:09,720
So I'll just update it to the correct spelling like so I can save this.

74
00:05:09,820 --> 00:05:12,070
And the error message goes away.

75
00:05:12,070 --> 00:05:12,900
Awesome.

76
00:05:12,910 --> 00:05:17,380
All right so moving forward we're going to be using this kind of type system throughout the rest of

77
00:05:17,400 --> 00:05:20,360
all this application and any other apps so we start to build.

78
00:05:20,530 --> 00:05:25,450
So it's something that we're going to do a lot moving forward just to help us catch possible typos.

79
00:05:25,450 --> 00:05:27,030
All right let's take a quick pause right here.

80
00:05:27,040 --> 00:05:30,820
There's one last thing I want to do around our producer and then we're going to start moving on to our

81
00:05:30,820 --> 00:05:31,720
next big feature.

82
00:05:31,810 --> 00:05:34,030
So quick break and I'll see you in just a minute.