1
00:00:01,290 --> 00:00:05,570
In the last section we finish wiring up producer to work with the email field.

2
00:00:06,140 --> 00:00:08,940
How do you this one very quick review on what's going on.

3
00:00:08,940 --> 00:00:11,570
And we're going to speed through the password implementation as well.

4
00:00:11,660 --> 00:00:12,540
OK.

5
00:00:13,030 --> 00:00:17,640
So this is our flow that we're going through every single time a user typed something inside an input

6
00:00:17,640 --> 00:00:18,190
field.

7
00:00:18,210 --> 00:00:23,850
You start at the very top left a user presses selects an input field and type something on their keyboard

8
00:00:23,850 --> 00:00:29,880
that pops up on the screen the instant they do that we call an action creator with the new text that

9
00:00:29,880 --> 00:00:32,450
the issue just entered the action creator.

10
00:00:32,460 --> 00:00:33,760
Returns in action.

11
00:00:34,080 --> 00:00:39,620
The action is a plain javascript object that has a type property and a payload property.

12
00:00:39,900 --> 00:00:43,440
The action is sent to all the different producers inside of our application.

13
00:00:43,440 --> 00:00:49,870
Right now we just have one the author douceur producer calculates a new application state.

14
00:00:49,890 --> 00:00:52,170
So it says OK I just got an action.

15
00:00:52,170 --> 00:00:55,880
Here is a new version of state taking this action into mind.

16
00:00:56,580 --> 00:01:00,500
Redux assembles the state from all the different reducers in our application.

17
00:01:00,510 --> 00:01:03,690
Yeah Right now there is only one but in the future there will be more.

18
00:01:03,720 --> 00:01:10,020
That state is sent to all the different components our components render with new application state

19
00:01:10,920 --> 00:01:15,870
and when that happens our input has a value set to this process.

20
00:01:15,960 --> 00:01:22,260
Email then everything finishes rendering everything on screen gets updated and we sit back twiddle our

21
00:01:22,260 --> 00:01:26,120
thumbs and wait for a new change initiated by the user.

22
00:01:26,220 --> 00:01:31,530
So this fluorite here just happens again and again and again throughout our entire application.

23
00:01:31,560 --> 00:01:35,770
Everything follows this flow right here in redux everything follows this flow.

24
00:01:36,670 --> 00:01:39,560
OK so again we have wired up our email input.

25
00:01:39,570 --> 00:01:42,460
We need to do the same exact thing for our password input as well.

26
00:01:42,780 --> 00:01:47,220
I'm not going to drag out the implementation here this time around is going to get through it pretty

27
00:01:47,220 --> 00:01:48,030
quickly.

28
00:01:48,030 --> 00:01:52,170
So let's wrap it all up inside of this section on the input.

29
00:01:52,170 --> 00:02:00,140
The first thing we need to do is add in an event handler will say on change text run a callback of.

30
00:02:00,410 --> 00:02:01,780
On password.

31
00:02:01,790 --> 00:02:05,750
Change it because we are going to reference this in that callback.

32
00:02:05,750 --> 00:02:07,770
We need to bind the context.

33
00:02:08,240 --> 00:02:14,200
Now inside this file we will define on password change.

34
00:02:14,540 --> 00:02:19,340
It will be called with the new text of the input when it gets called.

35
00:02:19,340 --> 00:02:23,780
We are going to call an action creator called the Stop proper start.

36
00:02:23,990 --> 00:02:30,680
Password changed and yes it is very tedious to have one action creator for every property here.

37
00:02:30,770 --> 00:02:37,910
We will talk about ways or we will actually refactor another form in just a little bit to show you how

38
00:02:37,910 --> 00:02:43,710
to handle many different properties with just one action creator so we'll get through all this boilerplate.

39
00:02:45,020 --> 00:02:47,930
So we're going to call the action creator called password change.

40
00:02:47,930 --> 00:02:51,610
We have not yet created that action creator but of course we're going to do in just a second.

41
00:02:51,620 --> 00:02:55,890
So I'm going to continue wiring up this file assuming that it actually exists.

42
00:02:56,150 --> 00:03:04,940
So from our actions file I'm going to also import password changes and also define that actual action

43
00:03:04,940 --> 00:03:05,840
creator.

44
00:03:05,840 --> 00:03:12,540
So inside of my actions index start J as File we will first define our action Kreator

45
00:03:17,530 --> 00:03:27,220
and from there I will return an object with a type property of password changes and a payload of the

46
00:03:27,220 --> 00:03:31,820
text so the text is the new password that the user just entered.

47
00:03:31,840 --> 00:03:37,900
I have to also define my password type here so every action creator has its own singular unique action

48
00:03:37,900 --> 00:03:41,570
type and I do that all inside of my type's file.

49
00:03:42,010 --> 00:03:44,890
Let's first up open up the types file.

50
00:03:44,890 --> 00:03:45,690
So Type start.

51
00:03:45,750 --> 00:03:53,390
Yes we will define our Konst of Password changed.

52
00:03:53,430 --> 00:03:55,090
A sign is a string.

53
00:03:55,090 --> 00:03:57,220
Again remember the string is not important.

54
00:03:57,220 --> 00:03:59,170
The value can be anything we want.

55
00:03:59,260 --> 00:04:01,010
It just has to be something unique.

56
00:04:01,420 --> 00:04:05,830
So I'll save this file are done inside of here and enclose it.

57
00:04:05,860 --> 00:04:11,860
I need to import the password changed up at the top because I expect this line to get pretty darn long

58
00:04:11,860 --> 00:04:12,430
pretty quickly.

59
00:04:12,430 --> 00:04:15,700
I'm going to line it here as well like so

60
00:04:19,040 --> 00:04:20,570
so here's my password changed.

61
00:04:20,600 --> 00:04:21,120
Cool.

62
00:04:21,140 --> 00:04:22,660
Everything looks good in here.

63
00:04:22,910 --> 00:04:25,310
Now I'm going to flip over to my author seducer.

64
00:04:25,760 --> 00:04:27,020
Inside the author inducer.

65
00:04:27,020 --> 00:04:33,700
We need to also import that password change type and we're going to add a case to catch that type.

66
00:04:33,770 --> 00:04:34,820
So all I will again.

67
00:04:34,890 --> 00:04:37,360
New Line this one as well.

68
00:04:37,520 --> 00:04:41,580
Import password change.

69
00:04:41,750 --> 00:04:45,630
I'm going to add on a new type or in a new case to watch for that type

70
00:04:48,760 --> 00:04:54,460
and when we come across that type we're going to update our state objects so we will return dot dot

71
00:04:54,460 --> 00:04:55,290
dot state.

72
00:04:55,330 --> 00:05:01,780
So take all the properties in our state object toss them in here and also throw on password of action

73
00:05:01,780 --> 00:05:05,230
dot payload and the last thing we should do.

74
00:05:05,230 --> 00:05:07,910
We don't have to do as per se but I recommend you do.

75
00:05:08,050 --> 00:05:13,410
I need to update my initial state object to have a password as well.

76
00:05:15,530 --> 00:05:21,150
So by default password starts off as empty string again I do not have to default this year.

77
00:05:21,230 --> 00:05:27,020
When our application first executes our first renders to the screen if I have a password of undefined

78
00:05:27,050 --> 00:05:30,990
and I try to pass into the input it's still going to render just A-OK.

79
00:05:31,040 --> 00:05:36,650
The real idea behind defining this password and really even the e-mail ahead of time with empty string

80
00:05:36,950 --> 00:05:42,620
is to just let other engineers in the future know hey this reducer is responsible for an e-mail and

81
00:05:42,620 --> 00:05:43,480
a password property.

82
00:05:43,470 --> 00:05:51,020
Like that's what it takes care of all right now the very last step is all flip back to a log and form.

83
00:05:51,050 --> 00:05:56,690
We're going to update our map state to prop's function at the bottom and then pass that to our input.

84
00:05:56,720 --> 00:05:59,160
So at the bottom here's my map stage props.

85
00:05:59,260 --> 00:06:02,920
Oops mouse jumped.

86
00:06:03,080 --> 00:06:10,700
So I'm going to also take a password property from state DOT DOT DOT password and now my phone has access

87
00:06:10,700 --> 00:06:13,020
to this dot props up password.

88
00:06:13,070 --> 00:06:18,350
I noticed that I am duplicating state DOT off here and even state is getting duplicated quite a bit

89
00:06:18,350 --> 00:06:19,150
as well.

90
00:06:19,160 --> 00:06:23,960
This will be a pretty reasonable time to use some yes 60 structuring if you like too.

91
00:06:24,050 --> 00:06:29,570
I'm just gonna leave it as is right now because I know that section is already getting quite long so

92
00:06:29,570 --> 00:06:31,830
I'm going to try to wrap things up here.

93
00:06:31,970 --> 00:06:36,200
So the very last thing we need to do is on top of our password input.

94
00:06:36,200 --> 00:06:37,410
So here it is right here.

95
00:06:37,550 --> 00:06:44,540
I'm going to give it a value of this process password OK.

96
00:06:44,990 --> 00:06:51,080
So one last time remember repeating the cycle over and over again user type something.

97
00:06:51,200 --> 00:06:53,190
We update the value in the reducer.

98
00:06:53,210 --> 00:06:58,340
The new state gets sent back to our component and then we can assume that new state inside of our component.

99
00:06:58,400 --> 00:07:01,950
That's the whole thing repeated over and over and over again.

100
00:07:01,960 --> 00:07:02,310
OK.

101
00:07:02,330 --> 00:07:04,750
So I do a quick refresh here just to confirm that.

102
00:07:04,760 --> 00:07:05,230
Yes.

103
00:07:05,240 --> 00:07:06,080
No big typos.

104
00:07:06,080 --> 00:07:07,560
Everything still runs.

105
00:07:07,700 --> 00:07:10,270
I can help.

106
00:07:10,610 --> 00:07:18,140
Looks like I made a mistake in my fall at the top we imported password change the action creator.

107
00:07:18,170 --> 00:07:21,890
I did not come back through and add it to the correct function at the bottom.

108
00:07:21,890 --> 00:07:22,840
Let's do that really quick.

109
00:07:22,830 --> 00:07:26,550
So I'm going to take password changed.

110
00:07:26,810 --> 00:07:32,250
I'm going to find my connect statement at the bottom and give it another action creator of password

111
00:07:32,700 --> 00:07:35,160
change like so.

112
00:07:35,400 --> 00:07:37,130
All right let's do another refresh.

113
00:07:37,160 --> 00:07:39,410
I'm happy we did that little test.

114
00:07:39,440 --> 00:07:41,980
Now I can update my e-mail and I can update my password as well.

115
00:07:42,020 --> 00:07:42,350
OK.

116
00:07:42,380 --> 00:07:43,440
Now we're good to go.

117
00:07:43,550 --> 00:07:44,910
Let's continue in the next section