We can now save a new employee over to firebase.
We just need to make sure that after we save a record successfully we kick the user back over to the
employee list screen where they will eventually we'll see the new employee appear on the screen.
Right now we also have a big red error message here that is telling us hey your action create or employed
create isn't really following the rules.
You're not returning an object with a type property on it to solve this issue we're going to use redux
thunk again inside of this little bit inside of this action crate right here.
Well we're going to use real stuff to kind of bend.
Well let's break the rules this time.
We're going to use it to break the rules.
So with firebase we've got this data that we're pushing off to this remote reference right here and
we don't really need a response back from firebase.
Right like the data gets persisted.
That's it we're happy we're done.
When our employee list opponent comes together and we go and get that list of all the different employees
the employee list is going to automatically update itself with the new employee that just get out it
got added.
So I'm trying to say is we don't really need to dispatch an action from this action create or at all.
And we really don't need to send anything out we don't need to do anything with it.
So that means we don't really need to return in action and we don't really need to wrap this with redux
thunked for the sake of getting access to the dispatch method.
We just kind of like want this thing to fade off into nothingness.
So to make that happen we're going to pretend like we're going to use redux thunk but we're really not
going to wrap this with a federal function like so.
So now this will be called by redux thunk.
Right so we're really satisfying the rules of redux thung here but we're not actually using the dispatch
method or anything like that at all.
So that's the idea.
There is one more thing we need to do inside of your However we need to make sure that after an employee
is successfully created we want to navigate them back to the employee list screen where they should
see the new employee pop up.
So to do so we can add on a dot then to this promise.
And inside of that then we will call our actions object to remember the actions object from our routing
library to navigate back to the employee list.
So we've called actions dot employee list.
We also need to make sure that we import actions at the top.
So we'll go to the top and import actions from re-act native router flock's like so.
OK.
So again we are really breaking the rules of redux thunk here by exploiting the fact that we can return
a function but we're not actually dispatching anything here at all.
Just be really clear the reason I'm choosing to wrap this with a federal function at all is to get past
this requirement of redux stuff.
So it's a little bit dishonest but it definitely works out for us.
OK.
I think that we're all ready to give this thing a nice little test.
So I will go ahead and refresh and then we will toss in an email.
Test test dot com and password and then we will add new employees.
So this time let's say we got Alex is out for four four and I'll go with Wednesday we'll create and
then we get kicked back over to the employee less like so.
Well this appears to work.
There's just one little weird thing in here.
You'll notice that when we got navigated over to the employee list we kind of added on to our stack
of current views so we've got this back button here but that doesn't really suit what we're supposed
to be doing here.
Right.
I don't want to go back to the employee creation form.
I really should have gone back so to speak to the employee list in the first place.
So there's two ways that we can handle this.
We can either pass an additional argument to this employee list action right here of reset true or excuse
me.
I got that backwards type reset.
There you go.
So if we pass on an option of type reset that's going to tell our navigation library that we want to
go to the employee list but don't treat it like it's a view that we're going to advance into.
And so it could like you know press the back button to go to the previous one by passing and type reset.
It means go to the employee list screen and just don't pretend like you know we can go back to the previous
screen for just like reset the entire stack.
So let's give this a test now.
Go to test test again.
We'll add a new employee.
Let's see let's do John.
And John has to work on Tuesday.
Now create and get kicked back over to the employee list screen.
This is exactly what we want.
And this time we don't have a back button which is definitely the behavior that we want to have in here.
We can also now go check out our firebase.
If we want to just have a little bit of fun and you now see that for the currently authenticated user
we have two additional employees in here.
So I've now got Alex and John in here as well.
All right.
There is one last little thing that we need to do.
One less thing that we need to think of.
I've said several times that you know hey we don't we don't need to actually dispatch an action from
here.
Well maybe we don't.
But I want you to see something a little bit interesting.
We have now created a actual employee.
Right.
We just created one.
I'm going to go back to the employee creation forum and when I go there you'll notice that very interestingly
our form still has Jaun has the name and the phone number and shifting here as well.
So that's pretty darn interesting.
So it turns out that just because we happen to like save the data right we'd just be happy just because
we created a new record over an firebase that does not automatically clear out all the state that is
in our form reducer for us.
Remember the form is going to show whatever data is sitting inside this reduce are being produced by
this reducer just because we save it does not mean that that state gets automatically or magically cleared
out in any fashion.
So the instant that I go back to the form the form will still be populated with all of the existing
state that we still had in there.
So definitely a little bit unexpected.
We can solve this by saying you know what maybe we do actually want to have an action in here.
We do want to dispatch an action from this file.
Or excuse me from this action creator.
So maybe you will say that after we successfully create an employee we will not only navigate back to
the employee list but we will also dispatch an action that will be responsible for resetting all of
the fields in that form.
So after we create the new user We will reset the form and navigate back to the employee list.
I think that will be a reasonable approach.
So let's go with that to build a dispatching action.
We have to make sure that we receive the dispatch method inside this function right here so I'll add
in dispatch and then in our dot then we will make sure that we not only navigate over to the employee
list we will also dispatch an action let's say it'll be of type about employee creates and makes sense
so we will watch for the type of employee create inside of our form reducer and the instant we see that
type we will reset all the fields inside our form.
So we need to make sure that we create this type so I can scroll up to the top when you get a semi-colon
in there and I'll scroll to the top.
We'll get our employee create and make sure that I add that type inside my type's file.
So here is my types filed export Konst employee create.
Then we can flip back over to our reducer as well and handle it inside of our form reducer.
So we'll pull an employee create and then we'll add in the case for it as well.
So case employee create a lot of employee rates all over the place.
So now inside of our educe right here whenever we see this employee create message come across it means
this user or excuse me this employee has successfully been created we can reset all the properties in
the form or in this reducers So the next time the user looks at the form it'll be completely clear totally
empty.
So here we can just return initial state.
We don't really have to do the DOT DOT DOT state or anything like that.
We can just return the initial state here because we really just want to reset this thing back to how
first existed.
All right.
So let's give this a shot now I will refresh the simulator do test test outcome.
And what's a good name to use this time let's go.
Nick about Nick Nick will also be 5:55 then he'll be on Thursday that will create this we get kickback
to the employee list screen and then when I go back to the ad screen the form is completely empty again
because my employee form inducer no longer holds a name phone or shift from when I just created Nick.
So perfect just what we want.
Let's continue in the next section.