redux-form trying to use isSubmitting selector

Question

I have the following redux-form component, and I want to use the isSubmitting selector to disable a submit button. However, it never returns true when the form is submitting

My mapStateToProps function:

const mapStateToProps = (state, props) => {
  const firstTemplate = _.first(props.templates.toList().toJS());
  const course = props.courses.getIn([0, 'id']);
  let values = { submitting: isSubmitting('CreateNewAssignmentForm')(state) };
  if (firstTemplate === undefined) {
    return values;
  }

  if (firstTemplate) {
    values = {
      course,
      template: firstTemplate,
      submitting: isSubmitting('CreateNewAssignmentForm')(state),
      initialValues: {
        template: firstTemplate.id,
        wordCount: firstTemplate.essay_wordcount,
        timezone: momentTimezone.tz.guess(),
        label: 'TRANSPARENT',
      },
    };
  }

  return values;
};

export default connect(mapStateToProps)(
  reduxForm({
    form: 'CreateNewAssignmentForm',
    destroyOnUnmount: false,
    shouldAsyncValidate,
    shouldValidate,
  })(CreateNewAssignmentForm),
);

partial snippet of my render() function:

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

    return (
      <StandardModalComponent
        id="AssignmentModal"
        title="Create Essay Draft"
        primaryAction={['Submit', handleSubmit, { disabled: submitting }]}
        width={800}
      >

Am i using the selector correctly?

Answer 1

There's absolutely no need to use the isSubmitting selector with the reduxForm hoc. The reduxForm hoc will pass on a submitting prop which can be used to check if the form is submitting. But redux-form needs to know when it is submitting. If your onSubmit returns a value other than a Promise, the submitting prop will always be false, redux-form simply has no way to tell when the submit has finished, but if onSubmit does return a promise (like @Sreeragh A R suggested) then it will set the submitting prop to true until the promise is resolved or rejected.

That said, there's something else to note: you're using the isSubmitting selector creator inside your mapStateToProps, this is really bad. This will create a selector for each rerender. A correct way of doing this is to use a createMapStateToProps function.

const createMapStateToProps = ()=> {
  const isSubmittingSelector = isSubmitting('CreateNewAssignmentForm');

  return (state, props) => {
    const firstTemplate = _.first(props.templates.toList().toJS());
    const course = props.courses.getIn([0, 'id']);
    let values = { submitting: isSubmittingSelector(state) };
    if (firstTemplate === undefined) {
      return values;
    }

    if (firstTemplate) {
      values = {
        course,
        template: firstTemplate,
        submitting: isSubmittingSelector(state),
        initialValues: {
          template: firstTemplate.id,
          wordCount: firstTemplate.essay_wordcount,
          timezone: momentTimezone.tz.guess(),
          label: 'TRANSPARENT',
        },
      };
    }

    return values;
  }   
}

 export default connect(createMapStateToProps())(
  reduxForm({
    form: 'CreateNewAssignmentForm',
    destroyOnUnmount: false,
    shouldAsyncValidate,
    shouldValidate,
  })(CreateNewAssignmentForm),
);