1
00:00:00,630 --> 00:00:06,510
In the last section we started working on our Post's new component by importing two helpers from redux

2
00:00:06,510 --> 00:00:07,560
form.

3
00:00:07,650 --> 00:00:14,610
The first was the field component which we are using to specify an input inside of this component because

4
00:00:14,700 --> 00:00:19,770
our form that we're putting together has three different properties or three different inputs that we

5
00:00:19,770 --> 00:00:21,190
want to reflect on here.

6
00:00:21,210 --> 00:00:26,800
I'm going to eventually expect to see three separate fields components inside this component.

7
00:00:26,880 --> 00:00:31,620
So the first one that we added right here will be responsible for recording the title that the user

8
00:00:31,620 --> 00:00:34,980
wants to enter for this new blog post.

9
00:00:34,980 --> 00:00:40,200
The second thing that we imported from redux form was the redux form function helper.

10
00:00:40,200 --> 00:00:45,750
So we treat this thing very much like the Kinect helper from the re-act redux library.

11
00:00:45,870 --> 00:00:50,860
We use the redux form helper to wrap the post-New component by doing so.

12
00:00:50,910 --> 00:00:57,750
We gave redux farm the ability to communicate directly from this component to the reducer that we wired

13
00:00:57,750 --> 00:01:01,040
up inside the last section as well.

14
00:01:01,050 --> 00:01:03,320
One more thing about the Form property in here.

15
00:01:03,420 --> 00:01:09,360
Remember that the farm property is used to specify kind of a name space of sorts for all the state that

16
00:01:09,360 --> 00:01:12,440
is going to be generated by this particular component.

17
00:01:12,450 --> 00:01:17,490
The only requirement for the foreign property right here is that it is unique and it only needs to be

18
00:01:17,490 --> 00:01:23,490
unique if we want this form to essentially live in isolation and not share any of its state with any

19
00:01:23,550 --> 00:01:25,070
other forms.

20
00:01:25,200 --> 00:01:31,050
Once you start working with like multi-page forms or wizard type forms that's where the value of this

21
00:01:31,050 --> 00:01:33,510
form property right here starts to get a lot more important.

22
00:01:33,510 --> 00:01:38,940
So for right now four basic forms you put together again you really just need to put in a unique string

23
00:01:38,940 --> 00:01:40,720
right here.

24
00:01:40,770 --> 00:01:41,030
OK.

25
00:01:41,040 --> 00:01:43,240
So let's get back to our field component.

26
00:01:43,590 --> 00:01:45,320
The field component one more time.

27
00:01:45,360 --> 00:01:51,330
It is used to represent a distinct input that will be visible on screen to our users.

28
00:01:51,330 --> 00:01:57,360
We specified the name property rights here which specifies exactly what piece of state this field is

29
00:01:57,360 --> 00:01:59,120
going to produce.

30
00:01:59,130 --> 00:02:03,810
We also added on this mysterious product called component and that's where we kind of left it off.

31
00:02:03,810 --> 00:02:06,310
We didn't talk too much about what it does.

32
00:02:06,330 --> 00:02:11,170
So let's talk about what component right here what this prop is for.

33
00:02:12,340 --> 00:02:16,160
Before a foot or two a diagram that's going to help us figure out what's going on here.

34
00:02:16,180 --> 00:02:21,730
I want you to take notice that in this configuration for the field that we put together so far I have

35
00:02:21,730 --> 00:02:28,180
done absolutely nothing to say hey this is supposed to be a text input so far.

36
00:02:28,180 --> 00:02:28,490
Right.

37
00:02:28,500 --> 00:02:35,350
Like Nothing here says text input even though I've said that Reducto form handles text inputs checkboxes

38
00:02:35,350 --> 00:02:35,980
blah blah blah.

39
00:02:35,980 --> 00:02:37,060
All those other type of thing.

40
00:02:37,060 --> 00:02:39,730
So I want to keep that in mind right now.

41
00:02:40,330 --> 00:02:45,020
So let's flip over to your diagram here we go.

42
00:02:45,020 --> 00:02:48,420
So the issue with the field component by default.

43
00:02:48,440 --> 00:02:53,840
It knows how to communicate with redux form which is very helpful because it saves us having to wire

44
00:02:53,840 --> 00:02:58,620
up all those different event handlers and action creators and all that different kind of stuff.

45
00:02:58,620 --> 00:03:04,580
Right so great redux form is going to help us out with that side of things and the field component is

46
00:03:04,580 --> 00:03:06,650
really key in that equation.

47
00:03:06,920 --> 00:03:11,750
The field component knows how the how to wire up all these event handlers action creators.

48
00:03:11,780 --> 00:03:18,380
All that great stuff the shortcoming of the field component however is that it does not know how to

49
00:03:18,380 --> 00:03:23,110
produce some amount of GSX to show on the screen to our users.

50
00:03:23,450 --> 00:03:29,330
So the fuel component it doesn't know how to show itself on the screen it only knows how to interact

51
00:03:29,330 --> 00:03:31,290
with redux form.

52
00:03:31,550 --> 00:03:38,040
The purpose of that component property that we're adding in here is to add in a function that will return

53
00:03:38,040 --> 00:03:43,470
some amount of GSX that will be used to show that field on the screen.

54
00:03:43,490 --> 00:03:48,620
So essentially you can think of the field component as being kind of a abstract kind of data record

55
00:03:48,650 --> 00:03:49,080
keeper.

56
00:03:49,100 --> 00:03:53,480
It's kind of like a librarian of sorts where it just wanted to kind of hide away and keep track of a

57
00:03:53,480 --> 00:03:54,680
bunch of data.

58
00:03:55,070 --> 00:03:59,990
This component Propp that we're adding in is the much more visual face it's the outward facing side.

59
00:03:59,990 --> 00:04:05,990
It's the thing that interacts directly with the user and it's our job to define this component property

60
00:04:07,610 --> 00:04:12,860
we are defining this component property right here because we want to have a lot of control over exactly

61
00:04:13,160 --> 00:04:15,570
how the field appears on the screen.

62
00:04:15,800 --> 00:04:20,810
We don't really care so much about what redux form is doing internally so we delegate all those event

63
00:04:20,840 --> 00:04:25,920
handlers and action creators blah blah all that stuff over to the field side.

64
00:04:26,220 --> 00:04:26,560
OK.

65
00:04:26,630 --> 00:04:32,400
So with this whole discussion mind let's start working on this first component prop.

66
00:04:32,540 --> 00:04:39,470
So again the component property is supposed to be a function that returns some amount of GSX.

67
00:04:39,530 --> 00:04:44,470
So rather than defining a function in here I'm not going to define a function just directly in here.

68
00:04:44,530 --> 00:04:48,770
I'm going to make a helper function on the component class itself.

69
00:04:48,770 --> 00:04:53,410
So let's say this dot render title field.

70
00:04:53,480 --> 00:04:58,850
Now I do notice that I am not putting any parentheses in here we are just providing a reference to a

71
00:04:58,850 --> 00:05:03,280
function because the field will call that function at some point in the future.

72
00:05:03,290 --> 00:05:04,870
We're not calling it ourselves.

73
00:05:06,540 --> 00:05:10,750
So all put in render title field like so.

74
00:05:10,750 --> 00:05:14,830
Now this is the part where things start to get a little bit confusing.

75
00:05:14,860 --> 00:05:20,320
Remember that rendered title field right here is just supposed to return some amount of GSX.

76
00:05:20,320 --> 00:05:26,890
However we do still have to kind of wire up the GSX that we are adding in here to the field component

77
00:05:27,520 --> 00:05:33,550
to help us do that render title field is going to be called with an argument that by convention call

78
00:05:33,880 --> 00:05:42,280
field this field object right here contains some event handlers that we need to wire up to the GSX that

79
00:05:42,280 --> 00:05:43,600
we're returning.

80
00:05:43,600 --> 00:05:48,040
So this is probably this is I probably just lost to you is my expectation.

81
00:05:48,040 --> 00:05:51,160
I bet I just lost you so the first thing we'll do.

82
00:05:51,190 --> 00:05:55,480
I'll tell you what let's delete field right here and we're going to write out some GSX for inside this

83
00:05:55,480 --> 00:06:00,920
function and I'm going to ask you a little bit about why you think that this might or might not work.

84
00:06:00,970 --> 00:06:04,080
OK so let's let's take the naive approach first.

85
00:06:04,450 --> 00:06:10,960
I can return a div and this is going to return an input.

86
00:06:11,140 --> 00:06:11,810
OK.

87
00:06:12,150 --> 00:06:16,770
And I'm going to give myself a little bit of space to work with props inside of here.

88
00:06:16,770 --> 00:06:21,600
So let's imagine that we just left this as is right now let's say that we execute this or resave the

89
00:06:21,600 --> 00:06:21,890
file.

90
00:06:21,890 --> 00:06:24,000
We refreshed it inside the browser.

91
00:06:24,240 --> 00:06:27,000
Now everything I've told you so far has been.

92
00:06:27,090 --> 00:06:27,360
Yeah.

93
00:06:27,390 --> 00:06:33,650
The field component is responsible for event handling and updating our different pieces of state.

94
00:06:33,750 --> 00:06:40,410
It's up to us to define the component Propp which will return some amount of GSX that represents the

95
00:06:40,410 --> 00:06:43,220
actual element that gets rendered onto the screen.

96
00:06:43,230 --> 00:06:43,780
Right.

97
00:06:43,960 --> 00:06:45,240
OK we've covered that.

98
00:06:45,240 --> 00:06:48,890
I'll repeat that probably five times in science lectures so far.

99
00:06:49,050 --> 00:06:53,490
So I want to ask you a question right now I want you to look at this input right here and I want to

100
00:06:53,490 --> 00:07:02,460
ask you does the field component have any reasonable reasonable reason to somehow say oh well if the

101
00:07:02,460 --> 00:07:10,880
user updates this input any changes to this thing must be corresponding to this particular field.

102
00:07:10,950 --> 00:07:12,860
Do you have like any reasonable sense for that.

103
00:07:12,960 --> 00:07:19,770
Well you know maybe yes but really no we can't really have any reasonable suspicion to say that this

104
00:07:19,770 --> 00:07:25,120
input right here is just going to be magically tracked by the field component.

105
00:07:25,170 --> 00:07:31,200
It's up to us to make sure that this field component recognizes that when it calls render title field

106
00:07:31,530 --> 00:07:37,980
which returns this input right here the field component needs to be responsible for handling any changes

107
00:07:37,980 --> 00:07:38,930
to this input.

108
00:07:39,060 --> 00:07:40,650
OK that's it still on us.

109
00:07:40,650 --> 00:07:42,120
There's no real magic here.

110
00:07:42,120 --> 00:07:44,820
We still have to wire this thing up.

111
00:07:44,970 --> 00:07:48,360
So that's the purpose of the field argument.

112
00:07:48,360 --> 00:07:53,790
The field argument contains an event handler or two that is going to be responsible for making sure

113
00:07:53,790 --> 00:08:00,450
that this field right here knows that it is responsible for dealing with this very particular text input

114
00:08:00,450 --> 00:08:02,730
right here.

115
00:08:02,760 --> 00:08:07,140
Now I know that I've told you several times that Redus form is responsible for handling all these event

116
00:08:07,140 --> 00:08:07,800
handlers.

117
00:08:07,810 --> 00:08:12,900
And so you might be saying Well Stephen wait you just told me redux form is responsible for the handlers

118
00:08:13,230 --> 00:08:17,930
but now you're telling me that we have to why are these things up manually on the input.

119
00:08:18,120 --> 00:08:19,890
And the answer is well not quite.

120
00:08:19,890 --> 00:08:21,800
It's way easier than you think.

121
00:08:21,840 --> 00:08:31,890
All we have to do is say curly braces dot dot dot field dot input like so that's really end of responsibility

122
00:08:31,920 --> 00:08:33,120
on our side.

123
00:08:33,510 --> 00:08:40,770
So this is a little bit of strange syntax right here your field dot input is an object which contains

124
00:08:40,830 --> 00:08:44,270
a bunch of different event handlers and a bunch of different props.

125
00:08:44,460 --> 00:08:50,910
So stuff like on on change and on blur on focus.

126
00:08:50,970 --> 00:08:55,280
It also has the value of the input by doing the dot dot dot.

127
00:08:55,290 --> 00:08:58,300
And here we're saying OK this is an object right here.

128
00:08:58,350 --> 00:09:04,230
And I want all of the different properties and this object to be communicated as props to the input

129
00:09:04,230 --> 00:09:05,220
tag.

130
00:09:05,220 --> 00:09:11,220
So it's just a little bit of fancy GSX to kind of save us from having to do something like onchange

131
00:09:11,280 --> 00:09:23,930
equals field dot input dot on change and on change and so on focus and on blur.

132
00:09:24,060 --> 00:09:26,760
So this is where the real time savings comes from.

133
00:09:26,820 --> 00:09:29,830
With redux form we don't have to wire these things up manually.

134
00:09:29,910 --> 00:09:37,440
We just have to pass through all these pre-generated event handlers through OK.

135
00:09:37,680 --> 00:09:43,080
So I know that we put a ton of knowledge in here lot of talking lot of discussion lot of very particular

136
00:09:43,080 --> 00:09:45,620
things about exactly how redux form works.

137
00:09:45,720 --> 00:09:48,470
I want to put on just one last property to this thing.

138
00:09:48,600 --> 00:09:54,090
I want to make sure that the input knows that it's supposed to be showing itself as a text type input

139
00:09:54,150 --> 00:09:56,030
as opposed to like a field or.

140
00:09:56,110 --> 00:09:58,800
Or excuse me a file picker or something like that.

141
00:09:59,010 --> 00:10:04,550
So I'm just going to specify very deliberately hey this is supposed to be a text type input.

142
00:10:04,560 --> 00:10:04,820
All right.

143
00:10:04,830 --> 00:10:09,510
I think we're about ready for a test inside the browser just to at least get a sense of whether or not

144
00:10:09,510 --> 00:10:11,810
we're somewhat doing things right.

145
00:10:11,820 --> 00:10:15,390
I know that there are still some aspects of redux form that are a little bit.

146
00:10:15,560 --> 00:10:18,410
You know I haven't gone into great detail just yet.

147
00:10:18,420 --> 00:10:20,420
Even though we've been doing a lot of talking.

148
00:10:20,580 --> 00:10:24,450
So I do want to test this thing out make sure we're going down the right path and we'll come back and

149
00:10:24,810 --> 00:10:28,740
kind of flesh out this rendered title field thing a little bit more.

150
00:10:28,980 --> 00:10:35,160
So inside my browser I'll flip on over to our application local's ADHD.

151
00:10:35,210 --> 00:10:36,890
I'm at post-START new.

152
00:10:37,170 --> 00:10:43,450
I'm going to refresh the page and we're getting a big error on here right now which is no problem.

153
00:10:43,470 --> 00:10:46,970
Let's come back and figure out exactly what's going wrong with this thing.

154
00:10:46,980 --> 00:10:48,350
Inside the next section.