In the last section we spoke about the three outstanding tasks we have.
So we've got to make sure that this button actually send some survey.
We need to make sure that when user clicks that they get navigated back over to our dashboard.
And then finally if the user clicks the cancel button over here and then goes back to the form I want
to clear out all the form values.
So I think that third item handling these form values being cleared out when the user clicks cancel
is going to the easiest and the most straightforward.
So it's take care of that inside the section.
Now when we think about clearing out the form values I want to remind you that at present if we open
up our survey form that G-S file and scroll down to the very bottom we've got the redux form helper
in here where we had specifically said if this component is unmounted do not clear out the form values.
Just keep them around.
Assume that we want to come back to this thing assume we want to see it at some point in the future.
And so now clearly that's not really quite the case 100 percent of the time.
If I click Cancel I am now unmounting the component and really I would want to clear out the form values.
Now you might be thinking OK Stephen that's really fine maybe let's add a click event handler to the
cancel button right here and whenever a user clicks it lets just clear all the formalities manually.
And I'm thinking about that and I'm thinking you know maybe that would work.
However I want you to kind of think about something deeply right now remember that we've got a bunch
of other links that we might have up inside of our.
And so the cancel button right here is not the only way in which a user might navigate away from our
form.
The user might click on some other navigational link up here and they will navigate away from the form
in which case we would also want to make sure that all these different values are cleared out as well.
So we really cannot tie the form value clearing behavior to specifically just the cancel button.
OK.
So instead we're going to use a little bit of a trick with redux form and I'm kind of excited to show
you this little trick.
Now I've tried I'll be totally honest with you.
Kind of like another Editor's note here.
I recorded this section like five times trying to explain what's going to go on here.
Just absolutely correct.
I think that this time in those five times really turned out well.
So this time around we're going to take a little bit of a different approach and I'm going to just add
in the code that's going to make all this form value stuff work the way we expect.
Gabriel the code first and then we'll come back and talk about exactly what it's doing because I think
if you see the code first it makes a little bit more sense rather than me trying to explain what's going
on.
OK so let's wire up this code so it's going to be a little bit of a trick that we're going to use to
make sure that the form values are cleared out when ever the user navigates away from this form.
But not if the user clicks on next over here.
OK.
So that's what the trick is going to be that's what it's going to address.
I'm going to find my components directory going to find the survey's folder and then cited there or
find the survey new component.
So your survey new numbers survey new is what is responsible for showing both the survey form and the
survey form of view.
So it really is the parent to both of those.
So right now we are inside of survey new right here.
Site serving you I'm going to import the redux form helper from the redux form library and then going
to go down to the very bottom of this file and I'm going to hook up the redux form helper.
It's a redux form.
We get the one set of parentheses and the second set around survey new.
And I'm going to make sure I put the options object inside of here and we're going to define just one
property that we're going to pass we're going to say form is serve a form like so.
OK.
So again I told you that we're going to write the code first and then explain it.
Let's test this out inside the browser and then we'll talk about exactly why this is going to work out
correctly for clearing out all of our different form values.
So I can go back to our application looks like I already got my automatic reload.
I've put in all my different values.
Click next.
You can still see the values on the screen.
If I click back they're still here so clearly I can toggle between these two and everything works the
way I expect.
But now if I click on cancel and then hit on out again all the form values are correctly cleared out
the way I would expect.
OK.
So clearly this is working the way we expect.
Now we get to talk about why it is working.
So again you know I have tried a couple of different angles of explaining this in previous iterations
of this video.
So here is try number five.
So to speak now that you've actually seen it work.
So here's what's happening get a first go back to our survey form remember this is where we initially
wired up the redux form helper.
Inside here we had to specifically add a setting that said if this component if this survey form is
unmounted then destroy or do not destroy Excuse me do not destroy any of the values contained within
the survey form.
And remember this form name right.
Your survey form specifies where redux form is going to store all the values out of the form inside
of our redux store.
So let's now go over to the survey new component.
Over here we wired up redux form and we said this component is tied to this form which is the exact
same one that we just saw a second ago.
However this time around we didn't not pass in that option of do not destroy the form values whenever
the component is unmounted.
So here's what happens.
Here's what really happens behind the scene.
When ever the survey form is unmounted and presumably we are toggling between these two components right
here are toggling the visibility of the two.
We are not clearing out the form values.
However once a user navigates away from the serve a new component right here.
So once they go back over to the dashboard or any other route that we define in the future as well if
this component is unmounted we're seeing clear all the values just dumped the form dump everything in
there.
And we're not really seeing that explicitly inside of here right.
We're not explicitly saying dump the form values we navigate away.
That is just the default behavior of redux form.
That is how redox form behaves by default.
If this component gets a mounted dump all the values that are inside of here.
And so that's why it's working out for us when we toggle between these two.
We are saying keep the values around.
However if we navigate away from survey new which basically means I don't want to deal with doing any
new survey stuff whatsoever then yes please do use the default behavior and just dump all the form values.
Ok so I think maybe this fifth time six time whatever it was came across a little bit more clearly.
Again we're kind of exploiting redux form in a kind of clever way here to make sure that our form values
are sometimes persisted and other times dumped entirely.
So now that we've got that little bug in the I would call it a bug.
You know you really would want the values to be dumped now that we've got that bug fixed.
Let's take a quick break and when we come back we're going to start thinking about how we're going to
handle the submit button on the review form.
So I'll see you in the next section.