React & Redux-Form - Prevent form from duplicate requests when 1st request hasn't resolved yet

1
votes

I have an issue where if I click the submit on redux-form (v.6) twice, very quickly, it will send two actions and then -> ajax requests to my server which will create a duplicate request.

What is the best way to disable the 'submit' button while the entry from the form is being saved in the database and enable it again after the entry has been stored. I tried the ( disabled={submitting} ) and it doesn't seem to work as an example below. There are not a lot of information on it so am I using it incorrectly?

class Timesheet extends Component {
...
  onSubmit(props) {
   console.log('submitting', props);
   createTimesheet(props);
  }


  render() {

    const {handleSubmit, reset, submitting} = this.props;

    return(
      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
      ... form details
      <button type="submit" disabled={submitting} className="btn btn-primary">Submit</button>
      </form>
    )
  }
}

...

const TimesheetForm = reduxForm({
  form: 'TimesheetNewForm',
  enableReinitialize: true
}
, null, {createTimesheet})(Timesheet);
...
2
javascriptreactjsreduxredux-form

2 Answers

0
votes

Your onSubmit function should return a promise.

In that case this.props.submitting will become true before the promise is resolved.

0
votes

You Can use promise like..

onSubmit={values => {
      return new Promise(resolve => {
method(){
return resolve
}
});
});