1
00:00:00,690 --> 00:00:04,860
In the last section we spoke a lot about all the different components we're going to use to put together

2
00:00:04,860 --> 00:00:11,010
the overall survey form in this section we're going to continue by talking about a very key technology

3
00:00:11,010 --> 00:00:15,970
or a key library that we're going to use to wire this form together and make it work nicely.

4
00:00:16,200 --> 00:00:20,500
Now the library is called redux form.

5
00:00:20,640 --> 00:00:26,280
I've taught redux form in several different courses and in all those different courses I've usually

6
00:00:26,280 --> 00:00:29,540
just kind of dove in and said hey we're going to use redux form.

7
00:00:29,550 --> 00:00:31,870
Here's how it works and here's what we're going to do.

8
00:00:31,870 --> 00:00:33,770
Let's just write some code to make it happen.

9
00:00:33,780 --> 00:00:38,740
But I found that redux form is not really the easiest thing in the world to use.

10
00:00:38,760 --> 00:00:43,790
And so I've got a lot of pushback from people who said Stephen why are we using redux form this is crazy

11
00:00:43,800 --> 00:00:46,310
it seems like it's making life really challenging.

12
00:00:46,410 --> 00:00:50,110
So this time around and this course we're going to do things just a little bit differently.

13
00:00:50,250 --> 00:00:55,590
We're going to first start off by talking about how we might handle this form without access to redux

14
00:00:55,590 --> 00:00:56,350
form at all.

15
00:00:56,520 --> 00:01:00,060
And then we're going to talk about some of the problems that might arise out of that and then we'll

16
00:01:00,060 --> 00:01:04,650
talk about why we're using redux form and what it's really doing for us that's going to make our lives

17
00:01:04,650 --> 00:01:05,860
so easy.

18
00:01:06,330 --> 00:01:10,170
So this is another location where if you don't want to hear about a lot of lecturing or things like

19
00:01:10,170 --> 00:01:12,530
that feel free to pause the video right now.

20
00:01:12,600 --> 00:01:14,180
Continue in the next section.

21
00:01:14,280 --> 00:01:15,540
We're not going write any code here.

22
00:01:15,540 --> 00:01:18,900
We're just talking about what redux form is and why we're using it.

23
00:01:18,900 --> 00:01:22,560
So again if you don't wanna hear it pause continue on.

24
00:01:22,740 --> 00:01:25,280
Otherwise let's get to it.

25
00:01:25,710 --> 00:01:26,110
OK.

26
00:01:26,160 --> 00:01:29,150
So again we've got a lot of different components floating around here.

27
00:01:29,190 --> 00:01:29,520
Right.

28
00:01:29,520 --> 00:01:34,470
Lot of different components now to be clear we are using all these different components to make sure

29
00:01:34,470 --> 00:01:38,160
that this form can easily be updated or changed in the future.

30
00:01:38,370 --> 00:01:43,410
Yes we could build this entire form inside of a single component if we really had to but that would

31
00:01:43,410 --> 00:01:46,210
end up with some really nasty looking code.

32
00:01:46,230 --> 00:01:51,440
So instead we're going to break everything out to use these separate components.

33
00:01:51,450 --> 00:01:54,600
Now I took the liberty of looking at all these different components.

34
00:01:54,600 --> 00:01:59,430
I thought about how they kind of are wired together or what the relation between all of them are.

35
00:01:59,580 --> 00:02:02,800
And I came up with a diagram that kind of looks like this right here.

36
00:02:02,820 --> 00:02:07,330
So at the very top we've got our app component that contains our re-act router.

37
00:02:07,510 --> 00:02:11,460
And inside there we've got our logic to show the survey new component.

38
00:02:11,460 --> 00:02:13,560
And of course we haven't really wired up any of this stuff yet.

39
00:02:13,560 --> 00:02:15,690
We're going to be doing it very shortly.

40
00:02:15,690 --> 00:02:21,690
Now we had said that the survey new would really serve as a wrapper around the survey form and the survey

41
00:02:21,960 --> 00:02:28,290
form review components the survey forms purpose is really just to wrap and display all the different

42
00:02:28,290 --> 00:02:33,810
fields that should appear on the screen and each of these fields are the actual labels and inputs that

43
00:02:33,810 --> 00:02:36,060
the user is going to type into.

44
00:02:36,060 --> 00:02:40,440
Now the survey form of view is where we're going to present the user their inputs and say like hey are

45
00:02:40,440 --> 00:02:43,850
you happy or are you ready to make this up and do you want to actually send this out.

46
00:02:44,130 --> 00:02:49,070
Now let's think a little bit about kind of the relation of data inside of the structure right here.

47
00:02:49,110 --> 00:02:51,930
Let's kind of think about how it's all put together.

48
00:02:51,930 --> 00:02:58,050
So the survey fields these contain inputs that a user is going to be typing into and that's going to

49
00:02:58,050 --> 00:02:59,400
produce some data.

50
00:02:59,400 --> 00:02:59,660
Right.

51
00:02:59,670 --> 00:03:06,180
Like the actual form data and at some point in time when a user clicks like Submit or take me to review

52
00:03:06,180 --> 00:03:12,180
screen we want to somehow transfer the data that is being produced by these components right here from

53
00:03:12,180 --> 00:03:16,620
the user typing into them into the survey form review.

54
00:03:16,620 --> 00:03:20,810
So we want to get data from here over to here.

55
00:03:20,850 --> 00:03:26,250
Now let's first sit down and think about how we would approach this problem if we did not if we were

56
00:03:26,250 --> 00:03:28,780
just using react like just react.

57
00:03:28,890 --> 00:03:36,180
No redox no redux form just react by itself if we wanted to get some data from these fields over to

58
00:03:36,180 --> 00:03:37,350
this component.

59
00:03:37,350 --> 00:03:42,420
We would have to store all this data right here on the lead.

60
00:03:42,420 --> 00:03:42,900
Nice.

61
00:03:43,080 --> 00:03:46,500
What's the best way of putting this like the lowest common parent.

62
00:03:46,520 --> 00:03:50,900
So basically the lowest common parent is the suit serve a new component right here.

63
00:03:51,150 --> 00:03:57,690
So the survey new component would store all the inputs all the input data and they would pass down that

64
00:03:57,690 --> 00:04:00,740
data as props to the survey form of view.

65
00:04:00,750 --> 00:04:02,560
Now already just thinking about that.

66
00:04:02,670 --> 00:04:07,260
Things get pretty nasty because that means that every single time a user enters some text into a survey

67
00:04:07,260 --> 00:04:14,610
field we have to somehow communicate that data backup to serve a new so that it can pass data down to

68
00:04:14,660 --> 00:04:16,180
survey form review.

69
00:04:16,230 --> 00:04:17,540
And so just thinking about that.

70
00:04:17,580 --> 00:04:22,560
I mean even just saying that process to you you're probably thinking like what what like how would we

71
00:04:22,560 --> 00:04:23,380
do that.

72
00:04:23,430 --> 00:04:25,290
And yeah exactly that's the point.

73
00:04:25,290 --> 00:04:30,610
Communicating from the survey field directly over to the survey form view component is not easy.

74
00:04:30,630 --> 00:04:38,300
It's tough and it would end up for some really nasty looking re-act code look at so let's think about

75
00:04:38,390 --> 00:04:45,020
a very close at hand solution or like a very easy solution to this which would be making use of a library

76
00:04:45,020 --> 00:04:48,550
that we've been using and like the last two hours as we talked about the sap.

77
00:04:48,800 --> 00:04:52,880
So specifically thinking about using redux here.

78
00:04:52,880 --> 00:04:59,450
So in the redux world communicating from the survey fields over to the survey form our view starts to

79
00:04:59,450 --> 00:05:06,560
get a lot easier and here's why we'll say that maybe every single time that a user enters some input

80
00:05:06,560 --> 00:05:12,690
into a survey field maybe that calls an action creator and updates the state and redux.

81
00:05:12,710 --> 00:05:23,400
So maybe we'll say that typing typing calls action creator updates state in redux store.

82
00:05:23,690 --> 00:05:30,480
So maybe the redux store will contain the text from each of these fields.

83
00:05:30,740 --> 00:05:36,000
Well if we do that then communicating that data down to the survey form starts to get really easy.

84
00:05:36,260 --> 00:05:43,220
We can connect the survey form of view to our read X store just as we have done previously using that

85
00:05:43,220 --> 00:05:44,480
connect helper.

86
00:05:44,510 --> 00:05:56,070
So we would say in this case survey form review can use connect to pull data out of redux like some

87
00:05:57,780 --> 00:06:02,010
now this process right here is something that is really at the core of redux right and this is something

88
00:06:02,010 --> 00:06:06,990
that we've spoken about many times the entire point of redux is to put all of our data at the very top

89
00:06:07,320 --> 00:06:13,380
and allow any component anywhere inside of our hierarchy to pull data out of that store without having

90
00:06:13,380 --> 00:06:18,480
to worry about really complicated system where we pass along like a bunch of props all the way through

91
00:06:18,480 --> 00:06:20,240
this chain or something like that.

92
00:06:20,250 --> 00:06:25,680
So this would be a very normal a very standard use of redux as I've just described it.

93
00:06:25,860 --> 00:06:30,770
But one when we really sit down and we start to think about wiring this together well think about it.

94
00:06:30,810 --> 00:06:35,340
That means that we would have to put together like all these different action creators we would have

95
00:06:35,340 --> 00:06:37,970
to create a new reducer inside of our store.

96
00:06:38,100 --> 00:06:43,810
We would have to wire up the survey form of view and attach that map state to props to it.

97
00:06:43,920 --> 00:06:48,870
We would have to probably figure out where to add in some custom validation logic because obviously

98
00:06:48,870 --> 00:06:54,190
at some point we want to like validate the data that the user is entering into these fields.

99
00:06:54,210 --> 00:06:54,410
Right.

100
00:06:54,410 --> 00:06:59,190
We want to make sure that the user actually submits data before we allow them to transition from the

101
00:06:59,190 --> 00:07:02,280
survey form over to the survey form of view.

102
00:07:02,280 --> 00:07:06,870
And so when we really think about building the solution with redux Yeah you know I can definitely imagine

103
00:07:06,870 --> 00:07:09,540
it happening but it feels kind of complicated.

104
00:07:09,540 --> 00:07:16,410
It feels like there might be a lot of code there and so that is the exact problem that redux form is

105
00:07:16,410 --> 00:07:17,910
trying to solve.

106
00:07:18,120 --> 00:07:22,160
Redux form is doing all of this stuff all the stuff.

107
00:07:22,170 --> 00:07:23,780
It's wiring up the action creators.

108
00:07:23,780 --> 00:07:26,240
It's putting the data into the redux store.

109
00:07:26,370 --> 00:07:32,160
It's pulling data out and giving access to that data to other components inside of your app and it's

110
00:07:32,160 --> 00:07:34,480
doing it all for you automatically.

111
00:07:34,740 --> 00:07:39,170
So redux form is not really you know bringing anything new to the table per se.

112
00:07:39,180 --> 00:07:45,530
They're not like magically producing some brand new feature or some magic for us or anything like that.

113
00:07:45,570 --> 00:07:52,470
They're not expanding redux in any fashion all redux form is doing is saving us the trouble of having

114
00:07:52,470 --> 00:07:57,870
to go through this entire process through the use of a couple of helpers that redux form contains.

115
00:07:57,870 --> 00:07:58,460
OK.

116
00:07:59,040 --> 00:07:59,760
So that's pretty much it.

117
00:07:59,790 --> 00:08:00,680
That's like the summary.

118
00:08:00,690 --> 00:08:06,480
That's why we're using redux form we use redux form so we don't have to wire up all these very manual

119
00:08:06,480 --> 00:08:11,930
pieces that we would have to do otherwise in practice.

120
00:08:12,090 --> 00:08:19,590
You know for very simple forms I will say that redux form sometimes introduces more code than you save

121
00:08:19,800 --> 00:08:25,200
for like a very simple form like you know for saying just entering these data and then click submit

122
00:08:25,260 --> 00:08:25,820
and that's it.

123
00:08:25,830 --> 00:08:30,890
You know we're going to go post this data to some server or something for forums like that redux form

124
00:08:30,900 --> 00:08:32,410
kind of is overkill.

125
00:08:32,550 --> 00:08:38,130
But as soon as we start talking about any particularly advanced form or complicated form like the type

126
00:08:38,130 --> 00:08:43,530
that we have here where we've got what's kind of called a multi-page form or a wizard type form it's

127
00:08:43,530 --> 00:08:46,330
a form that has multiple pages or multiple components to it.

128
00:08:46,500 --> 00:08:51,750
As soon as we start talking about this type of situation we want to be thinking about redux form because

129
00:08:51,750 --> 00:08:57,270
that's going to be a lot easier to use redox form for this than trying to do it by scratch or from scratch.

130
00:08:57,270 --> 00:08:57,810
OK.

131
00:08:59,190 --> 00:08:59,520
All right.

132
00:08:59,520 --> 00:09:02,310
So I think that's enough about the purpose of relex form.

133
00:09:02,310 --> 00:09:07,170
The last thing I want to tell you about is just a little bit about what's going on internally with redux

134
00:09:07,240 --> 00:09:11,320
form specifically during the installation process.

135
00:09:11,970 --> 00:09:12,300
OK.

136
00:09:12,300 --> 00:09:13,180
So here we go.

137
00:09:13,380 --> 00:09:15,030
This is a diagram of redux.

138
00:09:15,030 --> 00:09:20,250
So we use redox to create our store and the store is where all the data lives inside of our application

139
00:09:20,820 --> 00:09:25,520
we modify or update that data through the use of our reducers remember.

140
00:09:25,620 --> 00:09:29,370
And so right now we've got a single reducer called Author douceur.

141
00:09:29,790 --> 00:09:35,310
Now looking back at this form right here I said several times like yeah action create or update the

142
00:09:35,310 --> 00:09:38,390
data inside of redux update the data inside the store.

143
00:09:38,430 --> 00:09:43,890
And so as soon as I start saying that stuff you want to be thinking about actual creators actions and

144
00:09:43,890 --> 00:09:51,810
reducers and so clearly if redux form is kind of getting involved in this redux process it must be doing

145
00:09:51,810 --> 00:09:53,760
something with reducers or something like that.

146
00:09:53,760 --> 00:09:55,710
That's kind of like a reasonable assumption.

147
00:09:56,130 --> 00:10:02,240
And so that is totally accurate when redux form is handling all this automatic stuff or it's doing all

148
00:10:02,240 --> 00:10:03,910
this stuff for us automatically.

149
00:10:03,990 --> 00:10:07,830
It is still using redux under the hood to do it for us.

150
00:10:07,830 --> 00:10:13,140
So when we install redux form we are going to wire up a form reducer.

151
00:10:13,140 --> 00:10:18,550
It's called a Form reducer from the redux form library to our store.

152
00:10:18,840 --> 00:10:24,750
And that's what gives redux form kind of like a handle directly into our redux store and allows it to

153
00:10:24,750 --> 00:10:28,170
take care of all this busy work for us.

154
00:10:28,170 --> 00:10:33,420
So again behind the scenes I can't stress it enough redux form is not doing anything special for us

155
00:10:33,560 --> 00:10:37,870
it is just saving us from having to write code that we would be writing anyways.

156
00:10:37,950 --> 00:10:39,580
That's all it's really doing.

157
00:10:40,330 --> 00:10:40,810
OK.

158
00:10:40,890 --> 00:10:45,180
So hopefully now the purpose of redux form is a little bit more clear really at the end of the day it's

159
00:10:45,180 --> 00:10:46,520
time savings.

160
00:10:46,610 --> 00:10:50,510
It is keeping us from having to write stuff that we'd be writing anyways.

161
00:10:50,610 --> 00:10:55,500
And of course there's you know a lot of just really best practices baked in there and a lot of nice

162
00:10:55,500 --> 00:10:59,480
features that are otherwise kind of complicated to build out yourself.

163
00:10:59,580 --> 00:11:05,070
So with all that in mind now that we have a better idea of what redux form is doing for us let's take

164
00:11:05,070 --> 00:11:05,460
a break.

165
00:11:05,460 --> 00:11:07,130
We're going to come back in the next section.

166
00:11:07,170 --> 00:11:12,240
We're going to install a redux form and then we're going to wire it up to the redux side of our app

167
00:11:12,510 --> 00:11:13,740
with the form reducer.

168
00:11:13,860 --> 00:11:15,780
So I'll see it in just a second.