ReduxForm wizard with a forked step

Question

Im trying to build a reduxform wherein I have a parent page , and step1 , step2 components like the redux form example on the site.

Step1 has a dropdown with 2 values - lets say 'A' and 'B' Step2 has a couple of form input details If I have value 'A' in the step1 dropdown - I continue step2 with a post request to nodejs/mongo and redirect to a success page

(Main Question now: - How do I do the below)

If i have value 'B' in step 1 - The Step2 should continue to a Step3 -- and then at somepoint post to DB etc

How do i split the wizard flow ? Any leads much appreciated - Im v v new to react/redux and reduxforms and on a deadline .. apologies for the 'noob'ness

Answer 1

The onSubmit func receives the values of the form that is being submitted:

onSubmit(values, dispatch, props)

In the example each step uses the same form 'wizard' so values contains the state from all wizard steps. You can use this to determine the next step:

class WizardForm extends Component {
  constructor(props) {
    super(props)
    this.firstPageSubmit = this.firstPageSubmit.bind(this);
    this.secondPageSubmit = this.secondPageSubmit.bind(this);
    this.thirdPageSubmit= this.thirdPageSubmit.bind(this);
    this.state = { page: 1 };
  }
  firstPageSubmit(values) {
    this.setState({ page: 2  });
  }
  secondPageSubmit(values) {
    if(values.dropdown == 'A') {
      // post request to nodejs/mongo and redirect to a success page
    } else {
      this.setState({ page: this.state.page - 1 });
    }
  }
  thirdPageSubmit(values) {
    // at somepoint post to DB etc
  }

  render() {
    const { onSubmit } = this.props
    const { page } = this.state
    return (
      <div>
        {page === 1 && <WizardFormFirstPage onSubmit={this.firstPageSubmit} />}
        {page === 2 && <WizardFormSecondPage onSubmit={this.secondPageSubmit} />}
        {page === 3 && <WizardFormThirdPage onSubmit={this.thirdPageSubmit} />)}
      </div>
    )
  }
}