Dispatching 2 actions upon submitting with redux-form

Question

I'm using redux-form and I'd like my component to dispatch two actions upon submitting the form: the first is the action that sends the data from all form-fields(which is a built-in function) and the second that updates the status of a user to 'registered'. The problem is that the built-in handleSubmit function doesn't work when I do it the way you can see below and only "toggleRegistrationStatus" function is called. How do I go about dispatching these actions so the data gets sent and the status gets updated at the same time? My component's code:

import React from 'react'
import { Field, reduxForm } from 'redux-form'

class RegistrationPage extends React.Component {

    createAgeOptions(from,to) {
        var options = []
        for(var i=from; i < to; i++) {
            options.push(<option key={i} value={i}>{i}</option>)
        }
        return options
    }

    handleRegistration(e) {
      e.preventDefault()
      const {handleSubmit, toggleRegistrationStatus, registerUser} = this.props
      handleSubmit(registerUser)
      toggleRegistrationStatus()
    }

    render() {
        return (
          <div className="registration">
            <form action="" onSubmit={this.handleRegistration.bind(this)} className="registration__form">
              <div className="registration__field">
                <label htmlFor="name">Name:</label>
                <Field component="input" id="name" name="name" type="text"/>
              </div>
              <div className="registration__field">
                <label htmlFor="surname">Surname:</label>
                <Field name="surname" component="input" id="surname" type="text"/>
              </div>
              <div className="registration__field">
                <label htmlFor="age">Age:</label>
                <Field name="select" component="select" name="" id="age">
                    {this.createAgeOptions(1948,2015)}
                </Field>
              </div>
              <div className="registration__field">
                <label htmlFor="email">E-mail:</label>
                <Field name="email" component="input" id="email" type="email"/>
              </div>
              <div className="registration__field">
                <label htmlFor="telephone">Telephone number:</label>
                <Field name="telephone" component="input" id="telephone" type="telephone"/>
              </div>
              <button type="submit">Submit!</button>
            </form>
          </div>
        )
    }
}

export default reduxForm({
  form: 'registration'  // a unique identifier for this form
})(RegistrationPage)

Answer 1

You can try removing submit from form element and instead call it when clicking the submit button like this:

import React from 'react'
import { Field, reduxForm } from 'redux-form'

class RegistrationPage extends React.Component {

    constructor(props) {
        super(props);
        this.handleRegistration = this.handleRegistration.bind(this);
    }

    createAgeOptions(from,to) {
        var options = []
        for(var i=from; i < to; i++) {
            options.push(<option key={i} value={i}>{i}</option>)
        }
        return options
    } 

    handleRegistration(e) {
      e.preventDefault()
      const {toggleRegistrationStatus, registerUser} = this.props
      toggleRegistrationStatus();
      registerUser();
   }

    render() {
        const { handleSubmit } = this.props;

        return (
          <div className="registration">
            <form action="" className="registration__form">
              <div className="registration__field">
                <label htmlFor="name">Name:</label>
                <Field component="input" id="name" name="name" type="text"/>
              </div>
              <div className="registration__field">
                <label htmlFor="surname">Surname:</label>
                <Field name="surname" component="input" id="surname" type="text"/>
              </div>
              <div className="registration__field">
                <label htmlFor="age">Age:</label>
                <Field name="select" component="select" name="" id="age">
                    {this.createAgeOptions(1948,2015)}
                </Field>
              </div>
              <div className="registration__field">
                <label htmlFor="email">E-mail:</label>
                <Field name="email" component="input" id="email" type="email"/>
              </div>
              <div className="registration__field">
                <label htmlFor="telephone">Telephone number:</label>
                <Field name="telephone" component="input" id="telephone" type="telephone"/>
              </div>
              <button type="button" onClick={handleSubmit(this.handleRegistration)}>Submit!</button>
            </form>
          </div>
        )
    }
}

export default reduxForm({
  form: 'registration'  // a unique identifier for this form
})(RegistrationPage)