In the last section we started working on our Post's new component by importing two helpers from redux
form.
The first was the field component which we are using to specify an input inside of this component because
our form that we're putting together has three different properties or three different inputs that we
want to reflect on here.
I'm going to eventually expect to see three separate fields components inside this component.
So the first one that we added right here will be responsible for recording the title that the user
wants to enter for this new blog post.
The second thing that we imported from redux form was the redux form function helper.
So we treat this thing very much like the Kinect helper from the re-act redux library.
We use the redux form helper to wrap the post-New component by doing so.
We gave redux farm the ability to communicate directly from this component to the reducer that we wired
up inside the last section as well.
One more thing about the Form property in here.
Remember that the farm property is used to specify kind of a name space of sorts for all the state that
is going to be generated by this particular component.
The only requirement for the foreign property right here is that it is unique and it only needs to be
unique if we want this form to essentially live in isolation and not share any of its state with any
other forms.
Once you start working with like multi-page forms or wizard type forms that's where the value of this
form property right here starts to get a lot more important.
So for right now four basic forms you put together again you really just need to put in a unique string
right here.
OK.
So let's get back to our field component.
The field component one more time.
It is used to represent a distinct input that will be visible on screen to our users.
We specified the name property rights here which specifies exactly what piece of state this field is
going to produce.
We also added on this mysterious product called component and that's where we kind of left it off.
We didn't talk too much about what it does.
So let's talk about what component right here what this prop is for.
Before a foot or two a diagram that's going to help us figure out what's going on here.
I want you to take notice that in this configuration for the field that we put together so far I have
done absolutely nothing to say hey this is supposed to be a text input so far.
Right.
Like Nothing here says text input even though I've said that Reducto form handles text inputs checkboxes
blah blah blah.
All those other type of thing.
So I want to keep that in mind right now.
So let's flip over to your diagram here we go.
So the issue with the field component by default.
It knows how to communicate with redux form which is very helpful because it saves us having to wire
up all those different event handlers and action creators and all that different kind of stuff.
Right so great redux form is going to help us out with that side of things and the field component is
really key in that equation.
The field component knows how the how to wire up all these event handlers action creators.
All that great stuff the shortcoming of the field component however is that it does not know how to
produce some amount of GSX to show on the screen to our users.
So the fuel component it doesn't know how to show itself on the screen it only knows how to interact
with redux form.
The purpose of that component property that we're adding in here is to add in a function that will return
some amount of GSX that will be used to show that field on the screen.
So essentially you can think of the field component as being kind of a abstract kind of data record
keeper.
It's kind of like a librarian of sorts where it just wanted to kind of hide away and keep track of a
bunch of data.
This component Propp that we're adding in is the much more visual face it's the outward facing side.
It's the thing that interacts directly with the user and it's our job to define this component property
we are defining this component property right here because we want to have a lot of control over exactly
how the field appears on the screen.
We don't really care so much about what redux form is doing internally so we delegate all those event
handlers and action creators blah blah all that stuff over to the field side.
OK.
So with this whole discussion mind let's start working on this first component prop.
So again the component property is supposed to be a function that returns some amount of GSX.
So rather than defining a function in here I'm not going to define a function just directly in here.
I'm going to make a helper function on the component class itself.
So let's say this dot render title field.
Now I do notice that I am not putting any parentheses in here we are just providing a reference to a
function because the field will call that function at some point in the future.
We're not calling it ourselves.
So all put in render title field like so.
Now this is the part where things start to get a little bit confusing.
Remember that rendered title field right here is just supposed to return some amount of GSX.
However we do still have to kind of wire up the GSX that we are adding in here to the field component
to help us do that render title field is going to be called with an argument that by convention call
field this field object right here contains some event handlers that we need to wire up to the GSX that
we're returning.
So this is probably this is I probably just lost to you is my expectation.
I bet I just lost you so the first thing we'll do.
I'll tell you what let's delete field right here and we're going to write out some GSX for inside this
function and I'm going to ask you a little bit about why you think that this might or might not work.
OK so let's let's take the naive approach first.
I can return a div and this is going to return an input.
OK.
And I'm going to give myself a little bit of space to work with props inside of here.
So let's imagine that we just left this as is right now let's say that we execute this or resave the
file.
We refreshed it inside the browser.
Now everything I've told you so far has been.
Yeah.
The field component is responsible for event handling and updating our different pieces of state.
It's up to us to define the component Propp which will return some amount of GSX that represents the
actual element that gets rendered onto the screen.
Right.
OK we've covered that.
I'll repeat that probably five times in science lectures so far.
So I want to ask you a question right now I want you to look at this input right here and I want to
ask you does the field component have any reasonable reasonable reason to somehow say oh well if the
user updates this input any changes to this thing must be corresponding to this particular field.
Do you have like any reasonable sense for that.
Well you know maybe yes but really no we can't really have any reasonable suspicion to say that this
input right here is just going to be magically tracked by the field component.
It's up to us to make sure that this field component recognizes that when it calls render title field
which returns this input right here the field component needs to be responsible for handling any changes
to this input.
OK that's it still on us.
There's no real magic here.
We still have to wire this thing up.
So that's the purpose of the field argument.
The field argument contains an event handler or two that is going to be responsible for making sure
that this field right here knows that it is responsible for dealing with this very particular text input
right here.
Now I know that I've told you several times that Redus form is responsible for handling all these event
handlers.
And so you might be saying Well Stephen wait you just told me redux form is responsible for the handlers
but now you're telling me that we have to why are these things up manually on the input.
And the answer is well not quite.
It's way easier than you think.
All we have to do is say curly braces dot dot dot field dot input like so that's really end of responsibility
on our side.
So this is a little bit of strange syntax right here your field dot input is an object which contains
a bunch of different event handlers and a bunch of different props.
So stuff like on on change and on blur on focus.
It also has the value of the input by doing the dot dot dot.
And here we're saying OK this is an object right here.
And I want all of the different properties and this object to be communicated as props to the input
tag.
So it's just a little bit of fancy GSX to kind of save us from having to do something like onchange
equals field dot input dot on change and on change and so on focus and on blur.
So this is where the real time savings comes from.
With redux form we don't have to wire these things up manually.
We just have to pass through all these pre-generated event handlers through OK.
So I know that we put a ton of knowledge in here lot of talking lot of discussion lot of very particular
things about exactly how redux form works.
I want to put on just one last property to this thing.
I want to make sure that the input knows that it's supposed to be showing itself as a text type input
as opposed to like a field or.
Or excuse me a file picker or something like that.
So I'm just going to specify very deliberately hey this is supposed to be a text type input.
All right.
I think we're about ready for a test inside the browser just to at least get a sense of whether or not
we're somewhat doing things right.
I know that there are still some aspects of redux form that are a little bit.
You know I haven't gone into great detail just yet.
Even though we've been doing a lot of talking.
So I do want to test this thing out make sure we're going down the right path and we'll come back and
kind of flesh out this rendered title field thing a little bit more.
So inside my browser I'll flip on over to our application local's ADHD.
I'm at post-START new.
I'm going to refresh the page and we're getting a big error on here right now which is no problem.
Let's come back and figure out exactly what's going wrong with this thing.
Inside the next section.