We've got a scaffold put together for our form inducer and I remembered just like the log in form.
This is the thing that is going to govern all the different values on our form for creating an employee.
So when a user selects some input like this name right here and they start typing they are going to
be producing a name.
Same thing with phone and same thing for the shift.
So our go into maintaining three properties of state the name the phone and the shift we've already
wired up an action creator to handle the employee update type which is our idea of you know handling
update from the user typing on the keyboard on the device.
So let's put in some code to handle this employee update case will say employee update.
Now here's the fun part.
Here's the fun part.
I had said that our actions payload number let's flip back over to the employee actions file real quick
the actions payload will be an object having the key of Propp and a key value and each of those represents
like the proper name and the actual value number property.
There will be a name phone or shift and the value will be whatever the value of the input itself will
be.
So again just to make sure it's really clear I'm going to put in you know just a comment here really
quickly.
Action not pay payload is going to look something like a name or a prop prop name and value of Jane
or something like that.
That is what the auctions payload is going to look like.
So we need to somehow take this name right here and reflect that on our applications and on our application
state or on this reduce or sales I should say with a value of Jane because that's what our goal here
is.
So we're going to use a little bit of E-6 to just make this happen a very nice fashion let's put the
code down and then talk about what is going on here.
Remember that because we are in reducer we always want to make sure that we return a new object as well.
So I'm gonna return from here.
Dot dot dot States.
And then here's the fun part.
Action dot payload dot prop.
Make sure you get those square braces on there and then action dot payload dot value and then take out
that comment here as well.
All right.
So this is a fun little bit of VSX.
I want to say several times in a row these square braces right here are not an array.
It's non-array.
It's not an array.
It is not an array that we're creating right here.
This is called the interpellation.
So the key that we are adding to this object right here will be determined at runtime.
If we call our action Creator with a prop of name this whole segment right here this little chunk of
code will turn into name like so if we call our action Creator with a prop of shift this whole segment
will turn into shifts and so on with phone numbers as well.
So it is a nice little bit of syntax from iOS 6 just to avoid having to do something a little bit more
painful.
Basically if you want to use without ESX we would end up doing that you know tried and true thing that
looks like this where we do declare the object and then have to say Action payload prob equals action.
Payload value and then do the DOT DOT DOT state with a dot dot dot new state as well.
But this is really ugly right here.
Just nasty stuff using the key interpellation really saves us a little bit of pain.
All right.
But a semi-colon on there.
And I think we're in a good spot now.
So we've now got an action creator and reduce or put together so we can start to wire up inside our
form.
I think the last thing I want to do in the producer is again put in some initial state here some reasonable
initial state just to make sure that it's clear what properties this reducer is going to be maintaining.
So I expect it to have a name that's going to start off as empty string a phone which will be an empty
string and a shift.
I think we're looking pretty good here.
Before we flip on back to our form and start to wired up I did mention that we were going to do a little
bit of re factor in our action crater's file.
Remember we created our new action Creator having to do with employees inside the employee actions full
of file but we still have a whole bunch of actions related to authentication in the index on file.
So I'd really like to just do a quick refactor here just to make sure this is nice and clean have separate
files for each of our action creators.
So it really quickly in my actions folder I'm going to make a new file called auth actions and then
inside if you're going to take everything that I've got inside the index file right now I'm going to
cut it I'll put it into the office actions and now I get to treat my index file right here just as well
as the same as we did with our common index file as well inside of our reusable components folder.
So remember in there the idea was that we would import a file and immediately export it.
At the same time.
So inside of my actions index j yes will say export star from all factions and export star from employee
auctions as well.
I know this was a little side topic but I wanted to make sure we got that done before we forgot about
it.
So I can do a little bit of file cleanup here so that some in the open.
All right let's take a quick break.
Since we went a little bit out of were there to handle the Arthur actions and when we come back we'll
make sure that we hook up our employee form reducer to our combined reducers call and then hook the
whole thing up to our actual form component.
So I'll see in the next section