1
00:00:01,260 --> 00:00:02,093
Instructor: In this section,

2
00:00:02,093 --> 00:00:03,180
we're going to take advantage

3
00:00:03,180 --> 00:00:04,770
of the Redux Store that we just wired

4
00:00:04,770 --> 00:00:07,953
up to our application by adding in Redux Form.

5
00:00:08,940 --> 00:00:11,010
The Redux Form setup process is gonna

6
00:00:11,010 --> 00:00:14,400
start inside of our "reducers", "index.js" file.

7
00:00:14,400 --> 00:00:15,450
And, then we'll come back over

8
00:00:15,450 --> 00:00:16,860
to the signup component

9
00:00:16,860 --> 00:00:20,010
and make use of the Redux Form helper.

10
00:00:20,010 --> 00:00:23,700
So, inside of my "reducers", "index.js" file,

11
00:00:23,700 --> 00:00:27,090
I will import the Redux Form reducer.

12
00:00:27,090 --> 00:00:28,927
So, we'll do "import",

13
00:00:28,927 --> 00:00:31,670
"reducer as reduxForm",

14
00:00:34,267 --> 00:00:35,130
"from"- actually, you know what,

15
00:00:35,130 --> 00:00:36,930
let's name that something a little bit better.

16
00:00:36,930 --> 00:00:39,390
Let's do "formReducer"

17
00:00:39,390 --> 00:00:42,560
and we'll get that "from 'redux-form'".

18
00:00:43,410 --> 00:00:44,610
So, quick thing here,

19
00:00:44,610 --> 00:00:46,260
if you've not seen this before,

20
00:00:46,260 --> 00:00:49,440
it is renaming an import statement.

21
00:00:49,440 --> 00:00:51,480
So, the helper that we want to import

22
00:00:51,480 --> 00:00:54,060
from Redux Form is called "reducer".

23
00:00:54,060 --> 00:00:56,550
But, if we just import a variable called "reducer"

24
00:00:56,550 --> 00:00:58,950
into a reducers file,

25
00:00:58,950 --> 00:01:01,230
well, that'd be a little bit unclear.

26
00:01:01,230 --> 00:01:02,880
So, we take care of that

27
00:01:02,880 --> 00:01:05,820
with this "as" helper that allows us to

28
00:01:05,820 --> 00:01:07,740
rename this reducer variable

29
00:01:07,740 --> 00:01:10,710
to "formReducer" instead.

30
00:01:10,710 --> 00:01:12,390
So, now we can easily wire this up

31
00:01:12,390 --> 00:01:16,050
to our "combineReducers" call under the form key,

32
00:01:16,050 --> 00:01:18,310
which is required to do with Redux Form

33
00:01:19,380 --> 00:01:21,420
and we'll call it "formReducer".

34
00:01:24,210 --> 00:01:26,280
Okay, so that's how we set up Redux Form

35
00:01:26,280 --> 00:01:27,810
on the Redux side of things.

36
00:01:27,810 --> 00:01:29,070
Now, we can flip back over

37
00:01:29,070 --> 00:01:33,480
to our "components", "auth", "Signup.js" file

38
00:01:33,480 --> 00:01:34,500
and we can start making use

39
00:01:34,500 --> 00:01:36,333
of Redux Form inside of here.

40
00:01:37,920 --> 00:01:40,050
So, at the very top we can get started

41
00:01:40,050 --> 00:01:42,873
by importing "reduxForm"

42
00:01:43,830 --> 00:01:48,290
and the "Field" component "from 'redux-form'".

43
00:01:49,500 --> 00:01:52,260
Now, remember how we make use of Redux Form.

44
00:01:52,260 --> 00:01:55,830
We first add it to our component export statement.

45
00:01:55,830 --> 00:01:58,230
We tell it about the different field names

46
00:01:58,230 --> 00:01:59,760
that we're going to call this thing,

47
00:01:59,760 --> 00:02:00,600
and then we can make use of

48
00:02:00,600 --> 00:02:03,930
the field component inside the component itself.

49
00:02:03,930 --> 00:02:06,300
So, we'll first go down to the bottom.

50
00:02:06,300 --> 00:02:07,803
Here's our "Signup" statement,

51
00:02:09,090 --> 00:02:11,023
We'll do our "reduxForm".

52
00:02:13,320 --> 00:02:14,850
And, remember, it has a signature

53
00:02:14,850 --> 00:02:16,563
very similar to the connect tag.

54
00:02:17,640 --> 00:02:19,740
So, we have to provide an options object

55
00:02:19,740 --> 00:02:21,060
to this thing, and inside of it,

56
00:02:21,060 --> 00:02:22,350
we have to give a name

57
00:02:22,350 --> 00:02:24,300
for the form that we are creating.

58
00:02:24,300 --> 00:02:26,437
So, in this case, we'll call this form simply

59
00:02:26,437 --> 00:02:28,033
"signup", like so.

60
00:02:32,616 --> 00:02:34,410
So, now that we've wired up the form,

61
00:02:34,410 --> 00:02:36,330
we can make use of that "Field" tag

62
00:02:36,330 --> 00:02:37,650
to create the two inputs

63
00:02:37,650 --> 00:02:38,490
that we're going to need

64
00:02:38,490 --> 00:02:41,010
for the Email and the Password.

65
00:02:41,010 --> 00:02:42,960
So, let's first take care of our Email.

66
00:02:44,430 --> 00:02:47,043
I'm going to place my "Field" tag,

67
00:02:49,650 --> 00:02:50,940
and I'm gonna give myself a little bit

68
00:02:50,940 --> 00:02:53,640
of space to add some props inside of here.

69
00:02:53,640 --> 00:02:56,640
So, on the "Field" tag for the Email input

70
00:02:56,640 --> 00:03:00,180
I'm gonna give this field a name of "email".

71
00:03:00,180 --> 00:03:02,700
I'm gonna give it a type of "text",

72
00:03:02,700 --> 00:03:05,130
and then I will tell Redux Form what type

73
00:03:05,130 --> 00:03:07,500
of component I want it to render.

74
00:03:07,500 --> 00:03:10,890
So, I want it to render a normal text input.

75
00:03:10,890 --> 00:03:14,100
So, all I have to do is say "component", "input".

76
00:03:14,100 --> 00:03:15,810
Now, we can repeat the same process

77
00:03:15,810 --> 00:03:18,213
on the Password field as well.

78
00:03:19,140 --> 00:03:20,670
So, underneath that label,

79
00:03:20,670 --> 00:03:22,443
I'll add on a field, as well.

80
00:03:23,970 --> 00:03:26,790
I'll give it a name of "password".

81
00:03:26,790 --> 00:03:28,290
I'll give it a type of "password"

82
00:03:28,290 --> 00:03:29,760
which is going to make sure anytime

83
00:03:29,760 --> 00:03:31,770
someone enters a character in here,

84
00:03:31,770 --> 00:03:33,300
it shows the little dot instead

85
00:03:33,300 --> 00:03:35,220
of the actual character.

86
00:03:35,220 --> 00:03:36,420
And, then we will also tell it to

87
00:03:36,420 --> 00:03:39,453
use a "input" component, as well.

88
00:03:40,800 --> 00:03:41,730
Now, when I save this file,

89
00:03:41,730 --> 00:03:42,960
I apologize for that jump,

90
00:03:42,960 --> 00:03:45,450
it's my code reformatter kicking in.

91
00:03:45,450 --> 00:03:47,460
I know it's probably a little bit annoying to

92
00:03:47,460 --> 00:03:48,780
see my code jump throughout the course,

93
00:03:48,780 --> 00:03:51,000
but, honestly, it's usually for the best,

94
00:03:51,000 --> 00:03:52,080
because it makes sure that

95
00:03:52,080 --> 00:03:53,280
when you are looking at my code,

96
00:03:53,280 --> 00:03:56,730
you see crystal clear, very well-formatted code.

97
00:03:56,730 --> 00:03:58,683
So, I think it's worth the trouble.

98
00:03:59,970 --> 00:04:01,844
All right, so we've now got a "email" input

99
00:04:01,844 --> 00:04:04,110
and a "password" input.

100
00:04:04,110 --> 00:04:05,760
Let's now flip back over to our browser,

101
00:04:05,760 --> 00:04:07,510
and we're gonna see how this looks.

102
00:04:09,780 --> 00:04:10,890
So, now back over here,

103
00:04:10,890 --> 00:04:12,750
we have "Email" and "Password".

104
00:04:12,750 --> 00:04:14,820
If I type inside of "Email",

105
00:04:14,820 --> 00:04:16,470
I get normal characters,

106
00:04:16,470 --> 00:04:18,180
and if I type inside of "Password",

107
00:04:18,180 --> 00:04:20,940
I get the little dots that we would expect.

108
00:04:20,940 --> 00:04:22,410
Now, one thing I wanna point out here is

109
00:04:22,410 --> 00:04:24,787
that you'll notice a warning down here that says,

110
00:04:24,787 --> 00:04:28,170
"Input elements should have autocomplete attributes".

111
00:04:28,170 --> 00:04:30,090
Depending upon the version of Chrome

112
00:04:30,090 --> 00:04:31,230
that you are using,

113
00:04:31,230 --> 00:04:33,060
or, if you're not using Chrome,

114
00:04:33,060 --> 00:04:35,670
you may or may not see this warning.

115
00:04:35,670 --> 00:04:38,790
But, essentially, the browser wants to see us

116
00:04:38,790 --> 00:04:40,860
adding an autocomplete property

117
00:04:40,860 --> 00:04:44,703
to these two inputs to help our users fill them out.

118
00:04:47,430 --> 00:04:49,380
So, we need to to have a quick discussion

119
00:04:49,380 --> 00:04:50,730
about the autocomplete properties

120
00:04:50,730 --> 00:04:51,920
we're gonna use here.

121
00:04:51,920 --> 00:04:53,820
In the case of "Email" and "Password"

122
00:04:53,820 --> 00:04:57,060
on specifically the "Signup" form,

123
00:04:57,060 --> 00:05:01,050
we don't really know what autocomplete the user

124
00:05:01,050 --> 00:05:02,730
should be prompted with,

125
00:05:02,730 --> 00:05:03,750
and maybe they want to use

126
00:05:03,750 --> 00:05:04,950
an email that they've used

127
00:05:04,950 --> 00:05:06,270
in this browser before,

128
00:05:06,270 --> 00:05:07,710
but, personally, I don't know.

129
00:05:07,710 --> 00:05:09,240
I want to leave it up to the user

130
00:05:09,240 --> 00:05:11,475
to decide what email and what password

131
00:05:11,475 --> 00:05:12,900
they wanna put in here.

132
00:05:12,900 --> 00:05:14,220
And, I don't really want to

133
00:05:14,220 --> 00:05:16,230
show them any autocompletes,

134
00:05:16,230 --> 00:05:17,820
'cause if I show them an autocomplete

135
00:05:17,820 --> 00:05:20,820
on a signup form, that might make them think

136
00:05:20,820 --> 00:05:22,020
that they've already signed up

137
00:05:22,020 --> 00:05:23,700
to our application before in the past,

138
00:05:23,700 --> 00:05:25,953
which might not necessarily be the case.

139
00:05:26,790 --> 00:05:29,250
So, I'm gonna add an autocomplete prop

140
00:05:29,250 --> 00:05:33,960
to both these fields of "none",

141
00:05:33,960 --> 00:05:37,560
which means "do not show any autocomplete stuff".

142
00:05:37,560 --> 00:05:39,150
And, little typo here,

143
00:05:39,150 --> 00:05:42,330
the autocomplete should be "auto", all lowercase,

144
00:05:42,330 --> 00:05:45,240
and then a capital C for "Complete".

145
00:05:45,240 --> 00:05:46,710
And, then, we'll do the same thing

146
00:05:46,710 --> 00:05:49,203
down on the second field, as well.

147
00:05:51,780 --> 00:05:53,430
Okay, so now, if we save this file

148
00:05:53,430 --> 00:05:55,130
and flip back over to the browser,

149
00:05:58,110 --> 00:06:00,093
that warning message should go away.

150
00:06:02,520 --> 00:06:04,140
Very good.

151
00:06:04,140 --> 00:06:06,000
You might still see some stuff like this,

152
00:06:06,000 --> 00:06:08,220
the set timeout, that's totally fine.

153
00:06:08,220 --> 00:06:09,540
We can ignore that,

154
00:06:09,540 --> 00:06:12,810
and I think that we're totally good to go.

155
00:06:12,810 --> 00:06:14,400
So, let's take a quick pause right here.

156
00:06:14,400 --> 00:06:15,780
We'll come back to the next section.

157
00:06:15,780 --> 00:06:17,190
We're gonna talk about how we're going to

158
00:06:17,190 --> 00:06:18,840
handle submission of this form,

159
00:06:18,840 --> 00:06:20,190
and we'll also start talking about

160
00:06:20,190 --> 00:06:21,990
adding in some styling to make it all

161
00:06:21,990 --> 00:06:25,080
look a little bit better than it looks right now.

162
00:06:25,080 --> 00:06:25,913
So, quick break,

163
00:06:25,913 --> 00:06:27,410
and I'll see you in just a minute.