In the last section we started putting together our form that will be used to create a new employee
will now work on us a little bit more by suddenly out some action creators and reduce her to handle
changes to this form and all the values that it's going to produce.
One thing I want to mention about forms in redux again is that it is really up to us whether or not
we want to hold these values in our component levels state.
So like you know by initializing our state and killing said state or by using application level state
I'm going to make the claim that it's generally generally better to use redox level state.
So you know do the whole process full of action creators reducers all that kind of good stuff just because
it makes doing things like validation prepping the form with the initial values etc. all that kind of
stuff a lot easier when your data is sitting at the app level state.
So we're doing a little bit of extra work now for some big payoff later on in addition.
Just one more quick aside if you've ever used library redux form.
We are essentially doing more or less exactly what relax form does here by storing values on our application
level state with redox.
So really we're kind of doing the work of redux form here.
We it's form.
This also happens to include a bunch of helpers for making sure we don't have to write all the code
and all of these action creators that we're going through.
All right.
And let's get started.
Let's first make some action creators to handle a user changing the value of either the name or the
phone number.
So that's where we're going to start.
I mean all of my action crater's file so actions index not J.S. and the load to sin here.
Right now we've got we've got a bunch of actions related to authentication.
And so it feels a little bit funky to start adding in some action creator specific to like this one
very specific form next to something having to do with like signing a user in right.
Putting all that stuff in one file feels just a little bit off.
So I think that maybe would be well-served to create a new action create a file that will have just
the actions related to dealing with employees.
All right.
I think one new file just to deal with employees would be a good idea.
So in my actions folder and create a new file called employee actions we're going to make a separate
file for all the actions related to authentication and a little bit too.
But right now to stay focused on this form.
So our farmers can have three fields to it.
The email the phone and the shift we could create one action creator to handle a user editing each of
those fields like we did with the loggin form.
But I think that maybe you'd be a lot easier to just write one single action creator to handle update
any update to the form whatsoever.
So one arcsin creator any update to the forum.
So let's try it out.
I will create a new action creator called Let's do
about employee form employee update.
Now work and I'm going to assume that there's going to be called with two variables a prop and a value.
So the idea here is that rather than making however many action creators for you know one for each different
property that our form is going to create a different value that the form is going to create We're going
to make just this one employee update action creator.
Then whenever want to updates say the name I will call this thing with a prop of name and a value of
whatever the new name is.
If I want to update the shift I would call it with a prop of shift and the value of Monday or whatever
days been selected.
So one action creator that can update any different prop that is being that should exist inside our
form.
So inside of here we'll treat our action.
I'll give it a type of employee update.
I'm not I'm really not super happy with this type right here and the action clear name of employee update
because it's just very closely related to the idea of saving an employee.
Are you making a change or at it and saving it if we need to I think we'll come back and rename this
you know do a little bit refactor.
But for right now I can't quite think of a better term so we'll stick with this.
So then on my pay load I'm going to pass the prop and the value.
I do keep in mind that we're using a little bit of six year.
So I'm expecting this this action creator will be called with an object containing a prop a value key
and the payload that we return from this or the payload property will be an object containing a product
key and the value key as well.
So again just a little bit of the six here.
I did throw in the type of employee update in here.
So we need to create this type as well at the top we will import
employee update from types and need to make sure that I actually create this type inside my types file
as well.
So I do export Konst employee update and remember the stream value here.
Doesn't matter what it is it just has to be something unique.
Against all the other types that I have.
OK so this is looking good.
We've now got an action creator that we can call to update presumably our form.
We sought to make a reducer However So let's toss a producer together really quickly since we're definitely
on a roll here in my reducers folder.
I'll make a new file called employee form reducer
and inside of here we will throw in some boilerplate just to get started.
I will import the type that we just made while we're thinking about it.
So I'll get my employee update type from the actions slash types file and we'll toss in some boilerplate
for the actual reducer.
So I'll start by initializing my state to an empty object and I'll export default a function that gets
called with some in some states and I will default that to initial state and an action.
And then again just the same thing every single time we put in our switch statement over action type
by default.
We're going to return our state like so again just absolute boilerplate.
You can copy this chunk of code you know the the last half of this file right here from reduce your
reducer and it's always going to be the exact same thing.
All right.
This is looking pretty good so far.
Let's take a quick break and then start wiring up this reducer