In the last section we found that whenever we filled out the form went to the review form and then clicked
on the back button.
All of our inputs somehow got cleared out automatically.
So this is actually believe it or not a feature.
And yes I say feature of redux form redux form assumes that whenever your form component is unmounted
or no longer being rendered on the screen that means that the form values that it was keeping track
of or maintaining are no longer relevant.
And so it dumps all of them from memory.
In reality that actually makes a lot of sense because you can imagine that if we're using a form to
create some record and save it to the server after a user clicked on like maybe a save but right here
and we kick the user back over to some list of records or any you know basically any other type of page
and then if the user came back to this form to create a new record the user would expect to see a completely
blank and pristine form.
So that's definitely a more common use case of forms in general as opposed to this kind of leave the
form and then come back to it and still see all the values in there like what we're doing right now
is probably not quite as common.
So redux forum helps you with the more common case but it makes our case just slightly more challenging.
Now it's a slightly more challenging and I mean very very slightly redux form 100 percent acknowledges
that at times you might want to leave the form and come back to it and still see all the values in here.
So we make it really easy to have all the values stick around inside my code editor.
I'm going to find the survey form component.
So the survey form component remember this is what is responsible for actually showing the form to the
user as the first component that we see at the very bottom of this file.
We're making use of the redux form helper.
So here's the redux form helper this redux form helper is what initialises and configures the survey
form that we're about to work on.
Also by the way do recall I said awhile ago that we would talk about what this form property here was
and yes we're going to get to that very soon.
So I haven't forgotten.
Now there's one additional option we can pass to the redux forum help right here called destroy on unmount
and I bet you can guess what that does.
So if we say destroy on an amount of true which in it is true by default then redux form is going to
kill this form that we're working on.
Any time the survey form is unmounted or no longer shown on the screen.
But if we say false then that means hey I don't care if this component goes away I don't care if the
survey form is no longer being rendered.
Don't try to destroy that form.
Don't dump the values keep the values around.
So if we save this now we flip back over and wait for the refresh.
Put in some dummy inputs and then click on next then back all the values are still here because we told
redux form hey we understand this component's about to go away but don't try to get rid of the values
and inside of it.
So now our users can freely go back and forth between the two.
And in theory once we show all the inputs here on the screen and allow them to review their inputs they
should be able to have a very easy time to flip back over here and decide oh you know what maybe I want
to slightly change the email body or something like that.
OK.
So now we are back on the survey review screen.
That means that we want to make sure that we actually show all the different inputs to the user.
And you know like who said give them the ability to actually review the inputs that they've added.
So we're going to change back into the survey for survey form review components a tongue twister.
Here we are right here.
So again this is responsible for showing the inputs or the values to the user.
Now two things we have to do we have to first off figure out how we get access to all of our values
from those different inputs on that previous component inside of here and then we have to figure out
how to actually render them on the screen.
Now step two showing them you know in this component is certainly not the most challenging thing in
the world but getting access to the the those values inside of here certainly is a little bit more challenging.
Now we did talk a little bit about how we're going to do this in the past.
And you'll recall that this was kind of one of the big reasons that we were going to use redux form
at all.
So we had previously said that we had all these different survey fields components they would be making
changes they would be changing something inside the redux store.
And then we would use Reebok's to communicate those values down into the survey form or view.
And that is still exactly what we're going to do.
Remember we had this big long discussion about why we're using redox to hold all these values.
We're using redox to hold all the inputs or all the values coming out of these survey fields so that
we can easily communicate them over to the survey form of view component.
We'd also said that we are making use of redux for him specifically because having to create all those
action creators and all that stuff by hand is a pain in the rear.
And so we would just let redux form go ahead and do it for us.
So we have to get Vout some data out of our redux store into our survey form of component.
Now we are using redux form but redux form doesn't actually make pulling data out of the store any easier.
So we're still going to use the connect helper to take care of all that stuff for us.
Okay so we're still going to use the connect helper to reach into the redux store from the survey form
of view and pull out all the different form values.
So let's take care of that right now.
Back inside of survey form of view we're going to import the Kinect helper from the re-act redux library
and then we'll wired up to our component at the bottom with our two sets of parentheses.
Now remember how we use the connect function right here to pull values out of our Reebok store.
We always define that map state to prop's function.
And I can't say it enough the name of the function is not important just by convention we usually call
it map state to prop's because that is more or less what it's doing it's taking our redux state and
kind of transforming them into some props to send down to the component and let's make sure not to forget
to pass in as the first argument to connect as well.
So now inside of here remember Matt said to prop's is called with our entire state object out of the
redux store and then we're going to return some value inside of here.
That will be added as props to the component.
Now the first question I have is how are we going to actually get access to the form values which are
presumably stored inside the state object right here.
We haven't really spoken about that too much.
I think that may be a good first step.
Let's just cancel out the state object and kind of explore it and see what we're working with.
Remember we wired up a producer from redux form to our store.
So presumably there's some little piece of steak in here or some slice of state that is being managed
by redux form.
And I kind of expect to see that all of our different form values are stuffed in there somewhere.
But I don't know what that property name is often in my head.
So let's take a look at it and see what we're dealing with now to get that cost Lague to pop up where
you have to fill out the form one more time.
So I'll put my dummy inputs in a click next.
And there's our console log.
So when we do our consulate remember the top level keys here correspond to all the different keys inside
of our combined reducers call.
And so we've got the author douceur and the former douceur being provided by redux form.
And so of course in this case we care about this form piece of state when we expand it.
We'll see that it is an object of its own.
Here's some key called survey form.
It has another object inside of there.
Inside of that object is a couple more properties the other is a lot of stuff in here and inside of
there is the values object which contains all the actual values that we want to make access to inside
of our component.
OK.
So clearly the form values that we want to have are user review exist inside of the state object and
to get access to those.
We refer to states dot form.
Whoops sorry.
It's expand that data back out make access to state DOT form dot survey form dot values and that's where
all of our different form values sit.
Now one last thing before we actually go in.
Why are all that stuff up.
Notice how one sided the form piece of state here the mummy dial size up really quick make sure it's
really clear inside of that formed piece of state.
You'll see that all of the fields and all these different things that we really care about correspond
to this survey form key right here survey form.
So kind of feels like that he came out of magic or like out of you know who knows where.
Well as you might imagine if we flip back over to our survey form component where we had that redux
form help or at the very bottom that was the purpose of the form name.
So we put the form name in here of survey form.
That is what tells redux form how to correctly manage or kind of how to name space all the values for
this very particular form inside of our application inside of the form reducer.
So the reason that we have to provide this form name right here and kind of sectioned off all the different
form values inside of the form reducer is that we might have many different forms inside of our application.
And so we have many different forms.
We don't want all their values to kind of conflict or hit each other.
We want to have these nice little siloed areas where the survey form has its own set of fields its own
set of values its own set of whatever else those other things are as well.
Now this is both a blessing and a curse.
You know arsing and take that back.
Its only a blessing.
Its only a blessing because by allowing us to access all these different values on this name of survey
form it means that we could create other form components give them a name or a form value right here
of survey form and all of a sudden they would be sharing the same set of values.
Now thats actually really important because that would make putting together a true wizard form or a
true life.
Step by step or page by page form really easy to put together.
Now going a little bit off topic so let's kind of bring it back to our actual problem at hand.
We want to get access to all those values inside of the survey form or view component.
So I'm back inside of there.
Here's the map stage props function that we were just working on.
I'm going to clean up the console log and then inside of the return object right here.
Which remember is going to end up as props on our components.
We will say that the form values from our form are coming from state DOT form dot survey form dot values.
And so this entire path right here is coming from.
Again this object state DOT formed out survey form values.
So form values as we are passing it as a prop into our component is going to be this object right here.
So it's now going to be up to us to somehow print or display all these values inside of the component
get.
So I think that right now let's take a quick break and when we come back we're going to receive this
form values object inside of our survey form a view component as a prop and we'll make sure that we
all somehow get displayed or printed out onto the screen.
So let's take care of that in the next section.