We're in the middle of working on our form right now.
We just finished up our employee form douceur.
We have not yet wired up to our it to our combined reducers call so let's do that now before we forget.
This is something I just forget to do all the time personally so on make sure I catch this one.
So here's my reducers index file.
I've got my combined reducers in here.
Right now we've only got the author douceur So we are going to also import our employee form reduce
her from employee form producer and we need to decide on what piece of state.
You know what do we want to call this new piece of state.
I think Dunscombe call it employee form.
We've been nice and simple.
So the employee form piece of state will be maintained by the employee form reducer.
I'm not super happy you know I'm going on a bad spree of naming things here.
I'm not super happy with the name employee former douceur because it really assumes that there's only
ever going to be one employee form in our entire application.
So I am not super happy about it but I think that given the scope of this application I think it's going
to work out.
In addition I think that it's a reasonable pick because the form and the reducer itself are very tightly
coupled.
So the name does really imply hey this is working along with a employee forum which is hosted an employee
create now that our reducers hooked up we can flip back to our employee create form and start wiring
up our action creators.
So here is my employee create component at the top.
We need to.
Well let me first say we need to wire up an action creator here so whenever someone adds something or
type something on input we can call our action creator and update our form of state.
So remember how we get access to an action creator in a component we have to import the connect helper
and import the action career that we want to call as well.
So at the top will import connect from re-act redux and then we'll import employee update from actions.
Then at the bottom we will add on our connect.
So here's the bottom.
We do not yet have a map set to prop's So for the first argument I'll pass Gnoll.
And the second argument will pass in our employee update action creator and then don't forget that second
set of Puranas to go around employee create as well.
And you know I think I spoke too early we actually are going to have maps to prop's we have to make
sure that we get those attributes that are being created by the Forum itself.
So we will make a map state to perhaps function to pull stuff off of the employee form piece of state.
So say can smash state to prop's Here's my state object.
And then just as we did previously with our Auth. piece of state we'll do a little bit of destructuring
ahead of time and just make sure his cousin here looks nice and clean.
So I expect to have a name a phone and a shift.
Now of course again we do not yet have the shift in here but we will very shortly.
So we'll just carry the shift through right now.
So I'll say this is coming from state DOT employee form.
Remember I know I say this all the time but it's a very important piece of rebox.
We have the employee forum piece of state right here because we assigned our employee form producer
to the employee forum key in our recombined reducers call.
And that is why it's called employee form.
Finally we return the name the phone and the shift.
I think there's probably just one more step.
I think we'll just have to make sure that we pass these values or these name and phone onto the respective
inputs.
So let's do that right now.
I'll make sure that my input knows that it is.
Its value is going to come from this dot proper name and the phone's value is going to come from the
stock prop's doc phone.
One last thing I know there's a lot of typing here but you know I got it.
I got to point out the fact that we in the past on the logon form you know we spent probably six or
seven sections to go through what we're doing now into rather quickly.
So we're definitely speeding up here pretty handily.
The last thing we have to do is make sure that whenever an input's value is changed we call our employee
update action creator.
It's a lesson we have to do.
So on both the name and the phone will add in on change text you know give myself some space here and
I'm going to put the action or zoomy excuse me in the callback right here just in line on onchange text
rather than making a separate helper function up here.
So onchange text whenever this thing is called will be called with the new tax that's in that input
we need to call this not props dot employee update.
And remember the signature of this action creator.
You know what does it expect to be called with.
Let's go back over to our employee actions file.
Here is employee update.
They expects to be called within object with a proper key and a value key.
So we need to make sure we follow that method signature.
So whenever this thing gets called We want to make sure that it has a proper name and the value of text
like so to this this part in here that's keeping track of the proper thing is what's going to allow
us to use just one single action creator rather than having you know on name update on phone update
on shift update.
One actually creator for each attribute instead of we can just use a single one then we'll repeat the
same process for the phone input as well.
So say on change text take the text employee update that prompt we're changing this time it's me the
phone and the value is going to be text as well because that's what we're going to call our callback
function here with you mean text one thing keep in mind is that unless we are using destructuring from
the arguments object remember destruction is where we put in the curly braces and the arguments list.
If there's just a single argument here we can call this whatever we want.
It doesn't have to be text it can be name in this case it can be phone here be anything we want.
I'm just choosing to stick with text maybe a more reasonable approach would be if we made it value and
then we can use a little bit of E-6 shorthand to condense the line down to just be value like so.
Because if the name of the key and the value are the same we can condense it down to just a single word.
So maybe that's a valuable factor.
Let's go with that direction.
And shorten up each line just a little bit.
OK.
I think this is good.
I think that this is probably a great time to do a little bit of testing my Linter is complaining that
I defined map state to Propst without ever adding it anywhere.
So my mistake.
We defined this but we never added to the connect function.
I'm going to replace the null down here with map state to prop's like so right now ready for some testing.
Or refreshed the simulator.
I want to remind you when we log in here that due to that oddity with how Facebook or excuse me firebase
handles errors if there is any error in your code during the signing process it's going to be caught
during that firebase promise remember and you will see that error pop up in the console right here.
But it might manifest itself by saying authentication error making you think that you typed in the wrong
password.
But in reality it is the promise swallowing the air.
So don't forget that if you get an error right now or if it says authentication failed or something.
Hopefully mine works ok cool so I've got my employee list.
I'm going to attempt to add an employee when I want to be Jane.
5 5 5 5 5 whatever and then if I want to we can click create and add the record in here as well.
Of course we don't have anything hooked up to the button just yet.
So let's continue in the next section and finish working on our form.