reactjsreact-reduxredux-formreact-redux-form

Why is Redux Form not setting the value for submitting?


Below is my RequestAnInvite redux-form. The problem is when I submit the form, submitting is never changed to true. You can see I have a log below, which is always outputting false.

What am I doing wrong with redux-form to cause submitting to never set to true when I submit the form?

class RequestAnInvite extends React.Component {

  componentDidMount() {
    this.props.dispatch(loadTitles());
  }

  handleSubmit(data) {
    console.log(data);this.props.dispatch(requestInvitationsActions.createInvitationRequest(data));
  }

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

  console.log('submitting: ' + submitting);

    return (
      <div className="container-fluid h-100">  
        <form onSubmit={handleSubmit(this.handleSubmit.bind(this))}>
          <Field
            name="email"
            type="text"
            component={renderField}
            label="Email"
            placeholder="xxx@acme.com"
          />

        <p>submitting: {submitting}</p>

          <div className="form-group form-group-actions">
            <button type="submit" className="btn btn-primary" disabled={submitting}>
              {submitting ? 'Requesting...' : 'Request an Invite'}
            </button>
          </div>

        </form>
      </div>
    );
  }

}


RequestAnInvite = reduxForm({
  form: 'RequestAnInvite',
  validate,
})(RequestAnInvite);

const mapStateToProps = state => {
  return {
    titles: state.titles
  };
};

const mapDispatchToProps = (dispatch) => bindActionCreators({
  ...requestInvitationsActions,
}, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(RequestAnInvite);

Update 1

  handleSubmit(data) {
    this.props.createInvitationRequest(data)
      .then((response) => {
        console.log(response)
      }, (error) => {
    });
  }

Solution

  • From redux-form docs:

    Whether or not your form is currently submitting. This prop will only work if you have passed an onSubmit function that returns a promise. It will be true until the promise is resolved or rejected.

    Your handleSubmit is just dispatching an action so it has no way of knowing when it is submitting