1
00:00:00,930 --> 00:00:02,430
-: In the last section we imported the

2
00:00:02,430 --> 00:00:05,310
connect helper to our signup component file.

3
00:00:05,310 --> 00:00:06,300
But down at the bottom here,

4
00:00:06,300 --> 00:00:07,500
we noticed that we're going to have to

5
00:00:07,500 --> 00:00:09,480
wire up both the redux form helper

6
00:00:09,480 --> 00:00:11,310
and the connect function at the same time

7
00:00:11,310 --> 00:00:14,700
which usually ends up with some really weird syntax.

8
00:00:14,700 --> 00:00:16,290
So to help us with this,

9
00:00:16,290 --> 00:00:18,840
we're going to import at the top of the file

10
00:00:18,840 --> 00:00:22,140
a helper from the redux Library.

11
00:00:22,140 --> 00:00:24,480
So I'm gonna add in import

12
00:00:24,480 --> 00:00:29,160
compose from redux like so.

13
00:00:29,160 --> 00:00:31,050
This composed function allows us to write

14
00:00:31,050 --> 00:00:33,030
out multiple higher order components,

15
00:00:33,030 --> 00:00:34,920
with a much better syntax than

16
00:00:34,920 --> 00:00:37,500
if we try to like manually chain them all together

17
00:00:37,500 --> 00:00:39,930
with a bunch of sets of parentheses.

18
00:00:39,930 --> 00:00:41,850
So let's go back down to the bottom of the file

19
00:00:41,850 --> 00:00:44,550
and we're gonna try making use of this compose helper.

20
00:00:46,590 --> 00:00:48,480
Okay, so down here we're gonna write

21
00:00:48,480 --> 00:00:49,920
out the code that's going to make use

22
00:00:49,920 --> 00:00:53,100
of compose and we'll talk about what it's doing for us.

23
00:00:53,100 --> 00:00:54,570
So after export default,

24
00:00:54,570 --> 00:00:56,520
I'm gonna first begin by putting in

25
00:00:56,520 --> 00:00:58,143
a couple new line characters,

26
00:00:59,040 --> 00:01:02,550
and then I'm going to export default compose.

27
00:01:02,550 --> 00:01:04,379
I'm gonna write out one set of parentheses

28
00:01:04,379 --> 00:01:06,120
and put a new line in there.

29
00:01:06,120 --> 00:01:09,390
And then I'll put a second set of parentheses after that

30
00:01:09,390 --> 00:01:11,973
and I'll pass in our signup component.

31
00:01:13,500 --> 00:01:16,110
Now, inside of the body of compose right here,

32
00:01:16,110 --> 00:01:17,640
we're gonna list out all of the

33
00:01:17,640 --> 00:01:19,530
different higher order components that we

34
00:01:19,530 --> 00:01:23,130
want to have be applied to signup.

35
00:01:23,130 --> 00:01:26,130
So as the first argument I'm going to add

36
00:01:26,130 --> 00:01:27,783
in the connect helper.

37
00:01:29,730 --> 00:01:30,690
I'll call connect

38
00:01:30,690 --> 00:01:33,150
We're gonna add in a argument to it

39
00:01:33,150 --> 00:01:34,920
of our action creators in just a moment.

40
00:01:34,920 --> 00:01:36,339
But for right now,

41
00:01:36,339 --> 00:01:37,770
let's just put a comma in.

42
00:01:37,770 --> 00:01:40,260
And then as the second argument to compose,

43
00:01:40,260 --> 00:01:42,420
I'll put in the other higher order component

44
00:01:42,420 --> 00:01:44,640
that I want to apply to sign up.

45
00:01:44,640 --> 00:01:47,250
So the other higher order component that I want to apply

46
00:01:47,250 --> 00:01:49,950
is just the redux form helper.

47
00:01:49,950 --> 00:01:52,290
So I'm gonna cut that and I'll put it in

48
00:01:52,290 --> 00:01:54,480
as a second argument like so.

49
00:01:54,480 --> 00:01:56,790
So notice that signup is not at the end.

50
00:01:56,790 --> 00:01:58,110
There is no signup over here.

51
00:01:58,110 --> 00:02:00,513
It's just the redux form helper.

52
00:02:01,410 --> 00:02:02,243
And then finally,

53
00:02:02,243 --> 00:02:05,433
I'm gonna delete that leftover signup call at the bottom.

54
00:02:06,840 --> 00:02:07,673
Okay.

55
00:02:07,673 --> 00:02:10,050
So what compose does for us is it allows us to

56
00:02:10,050 --> 00:02:14,610
apply multiple higher order components to a single component

57
00:02:14,610 --> 00:02:17,490
with a much more attractive syntax.

58
00:02:17,490 --> 00:02:18,720
So inside of compose,

59
00:02:18,720 --> 00:02:20,550
we can pass in as many higher order

60
00:02:20,550 --> 00:02:21,990
components as we wish,

61
00:02:21,990 --> 00:02:24,990
and they will all be applied in series

62
00:02:24,990 --> 00:02:27,060
to whatever component we pass in

63
00:02:27,060 --> 00:02:28,503
at the last call down here.

64
00:02:29,520 --> 00:02:32,940
So composed does nothing special whatsoever.

65
00:02:32,940 --> 00:02:36,420
Besides allowing us to avoid writing out a whole bunch

66
00:02:36,420 --> 00:02:38,130
of different sets of parentheses.

67
00:02:38,130 --> 00:02:39,560
That's all.

68
00:02:39,560 --> 00:02:41,850
Nothing else is happening with compose.

69
00:02:41,850 --> 00:02:44,550
Okay, so now that we understand what's going on with compose

70
00:02:44,550 --> 00:02:48,090
we can finish up with the connect helper right here.

71
00:02:48,090 --> 00:02:50,760
So right now we are trying to apply our action creators

72
00:02:50,760 --> 00:02:52,950
to the signup component.

73
00:02:52,950 --> 00:02:54,600
So as the first argument to connect,

74
00:02:54,600 --> 00:02:56,730
I'll pass a null because there currently

75
00:02:56,730 --> 00:02:58,740
are no pieces of state that we want

76
00:02:58,740 --> 00:03:00,540
to wire up to this thing.

77
00:03:00,540 --> 00:03:02,100
And then as a second argument,

78
00:03:02,100 --> 00:03:04,233
I'll pass in my actions object.

79
00:03:06,420 --> 00:03:07,440
Now, when I save this,

80
00:03:07,440 --> 00:03:09,330
you'll notice that again my code jumps

81
00:03:09,330 --> 00:03:10,920
thanks to my code formatter.

82
00:03:10,920 --> 00:03:12,780
I'll leave it on the screen here just for one more moment

83
00:03:12,780 --> 00:03:14,830
just so you can see the entire statement.

84
00:03:16,410 --> 00:03:18,303
And then I'm gonna save the file.

85
00:03:21,094 --> 00:03:24,787
So now we can go back up to our on submit callback method

86
00:03:26,580 --> 00:03:27,930
and inside this thing,

87
00:03:27,930 --> 00:03:30,360
rather than trying to console log anything,

88
00:03:30,360 --> 00:03:33,390
we're gonna call the signup action creator

89
00:03:33,390 --> 00:03:35,690
that is now available inside of our component.

90
00:03:37,170 --> 00:03:38,520
So inside of on submit,

91
00:03:38,520 --> 00:03:42,700
I'll call this dot props dot signup

92
00:03:43,680 --> 00:03:46,383
and I'll pass in the entire form props object.

93
00:03:48,150 --> 00:03:51,420
Okay, so now I think we've got more or less

94
00:03:51,420 --> 00:03:54,510
the entire chain all the way from form submission,

95
00:03:54,510 --> 00:03:56,970
to attempting to create a new account.

96
00:03:56,970 --> 00:03:58,290
So I'm gonna save this file,

97
00:03:58,290 --> 00:04:00,540
and we'll very quickly flip back over to our browser

98
00:04:00,540 --> 00:04:01,500
and test this out.

99
00:04:01,500 --> 00:04:02,370
So at this point,

100
00:04:02,370 --> 00:04:04,710
all I really expect to see is a request

101
00:04:04,710 --> 00:04:06,510
going over to our backend api

102
00:04:06,510 --> 00:04:08,610
that will attempt to create a new account.

103
00:04:09,480 --> 00:04:11,580
So I'm gonna flip back over to my browser.

104
00:04:14,880 --> 00:04:16,923
I'm gonna open up my Chrome inspector,

105
00:04:17,940 --> 00:04:20,132
and I'm gonna go to the network tab.

106
00:04:21,000 --> 00:04:23,460
So again, we don't have really any indication

107
00:04:23,460 --> 00:04:24,960
inside of our application itself

108
00:04:24,960 --> 00:04:26,730
that we have successfully signed up.

109
00:04:26,730 --> 00:04:28,320
All I wanna see is a request

110
00:04:28,320 --> 00:04:29,910
that goes to our backend api.

111
00:04:29,910 --> 00:04:32,490
And I wanna make sure that the request has the correct

112
00:04:32,490 --> 00:04:34,980
email and password that's going to attempt to actually

113
00:04:34,980 --> 00:04:36,513
create a new account for us.

114
00:04:37,500 --> 00:04:39,750
So once I've got the network request log open,

115
00:04:39,750 --> 00:04:42,570
I'm gonna clear all the requests that have been made,

116
00:04:42,570 --> 00:04:45,360
and I'm going to enter an email and a password.

117
00:04:45,360 --> 00:04:48,180
Now remember, our backend api makes sure

118
00:04:48,180 --> 00:04:52,050
that all emails are unique when you try to sign up.

119
00:04:52,050 --> 00:04:53,850
So when we were putting the server back together,

120
00:04:53,850 --> 00:04:55,980
if you used an email already,

121
00:04:55,980 --> 00:04:57,450
and you try to reuse that now,

122
00:04:57,450 --> 00:04:59,850
you're probably gonna see an error message.

123
00:04:59,850 --> 00:05:00,870
So make sure that you put in

124
00:05:00,870 --> 00:05:03,060
a unique email and password right now,

125
00:05:03,060 --> 00:05:05,010
so that you know that you're not gonna get an error

126
00:05:05,010 --> 00:05:07,380
due to that email being in use.

127
00:05:07,380 --> 00:05:11,220
So my email, I'll do like phone at phone dot com,

128
00:05:11,220 --> 00:05:13,233
which I've definitely never used before.

129
00:05:14,730 --> 00:05:15,690
And then for a password,

130
00:05:15,690 --> 00:05:17,230
I'll do simply password

131
00:05:18,180 --> 00:05:19,800
and then I'll click sign up

132
00:05:19,800 --> 00:05:21,813
and we should see our request be issued.

133
00:05:22,770 --> 00:05:24,090
Now when the request is issued,

134
00:05:24,090 --> 00:05:26,010
I could definitely see a request over to

135
00:05:26,010 --> 00:05:29,190
local host thirty ninety slash signup right here,

136
00:05:29,190 --> 00:05:31,740
But you'll notice that down inside of my console,

137
00:05:31,740 --> 00:05:34,620
I've got a pretty nasty air message.

138
00:05:34,620 --> 00:05:36,990
So this air message right here is to be expected.

139
00:05:36,990 --> 00:05:38,160
If you're seeing this air message,

140
00:05:38,160 --> 00:05:39,600
totally fine.

141
00:05:39,600 --> 00:05:41,130
Let's take a pause right in here.

142
00:05:41,130 --> 00:05:42,600
We're gonna come back in the next section

143
00:05:42,600 --> 00:05:43,860
and we're gonna talk about exactly

144
00:05:43,860 --> 00:05:45,870
why we're seeing this air message,

145
00:05:45,870 --> 00:05:47,550
and how we can fix it.

146
00:05:47,550 --> 00:05:50,000
So quick break and I'll see you in just a moment.