Using Redux Form with React Router

Question

I've been spinning my wheels for a while now trying to figure out the best way to do all of this. Here is my situation:

I'm using a mix of React Router and Redux Form to create login/create account pages.

export default (
  <Route path='/' component={App}>
    <IndexRoute component={Signup} />
    <Route path='signup_verify' component={SignupVerify} />
  </Route>    
);

When you load the homepage it shows the fields to create an account

I use React Form to validate the fields and once everything is ok I do

onSubmit() {
  this.context.router.push('/signup_verify')
}

thus pushing them to the next and last page of the wizard. In this second page I have a disabled input that I want to populate with the name they gave me in the prior form. How the heck do I get the name the user submitted to appear in this second page?

React Form talks about using decorators:

@reduxForm({
  form: 'myForm'
})

http://redux-form.com/5.2.4/#/api/get-values?_k=eo04uv

https://github.com/erikras/redux-form/issues/260#issuecomment-155852315

I set up my environment to be able to use decorators but when I try to implement the same code a few lines above I an error saying:

Warning.js:45Warning: Failed propType: Invalid prop fields of type object supplied to ReduxForm(Signup), expected an array. Check the render method of Connect(ReduxForm(Signup)).warning @ warning.js:45 getValues.js:59

and

Uncaught TypeError: fields.reduce is not a function

My first page, where the screenshot came from, looks VERY similar to WizardFormFirstPage.js (http://redux-form.com/5.2.4/#/examples/wizard?_k=y8mg56). How would WizardFormSecondPage display data from WizardFormFirstPage in a disabled input?

I know that's a lot, any help is greatly appreciated! Also any feedback on doing this another way would be awesome, or thumbs up on my current approach.

Answer 1

Set the option destroyOnUnmount: false in your reduxForm() decorator.

Secondly, you should probably use the react-redux package. It has a function called connect() which allows you to pass state to the props.

const mapStateToProps = (state) => {
  return {
    name: state.form.myForm.name,
    email: state.form.myForm.email,
    company: state.form.myForm.company
  }
};

const SignupVerify = connect(mapStateToProps)(SignupVerify)

Replace SignupVerify with the name of your component.

state.form.myForm will change depending on what properties you entered for reduxForm()

Redux usage with React

Redux-Form wizard example