redux-form Wizard form with linked fields

Question

I am building a multi-step application form with React. Having first built it with pure internal state I am now in the process of refactoring to Redux using redux-form.

Having used the example here as a basis: http://redux-form.com/5.2.5/#/examples/wizard?_k=oftw7a we have come a good way.

However the problem appears when i have two forms which are supposed to have the same value. During one of the pages i have a name field, that is supposed to be duplicated on the name field of the next page. The opposite should happen if you go back from the last page. Any tips to how this could be achieved?

Answer 1

Using the wizard, you are basically working with the exact same form that's split into multiple pieces. Ultimately it's the same form, because redux-form tracks them by name. It is how the library identifies the pieces of the same form - using the name.

form: 'wizard',

Here you can see that the exact same instance of the form will be shared throughout the pieces. fields work in a similar manner. Each field is defined as part of a form .

As long as you use the same field constants inside the fields object that you pass into the reduxForm function and as long as the value for form is the same, so that they use the same underlying form object, it should work for you just fine.

On one page you should pass in

export default reduxForm({
  form: 'wizard',
  fields : {
     'fieldIWantOnBothPartsOfTheForm',
     'someOtherFieldThatShouldOnlyBeHere',
  },
  ...

And then on the other page:

export default reduxForm({
  form: 'wizard',
  fields : {
     'fieldIWantOnBothPartsOfTheForm',
     'thirdFieldHere',
  },
  ...

Also, make sure you keep destroyOnUnmount equal to false if you want to navigate back-and-forth.

Hope that helps.