redux-form试图使用isSubmitting选择器

Question

我有以下redux-form组件,我想使用isSubmitting选择器来禁用提交按钮.但是,在表单提交时,它永远不会返回true

我的mapStateToProps功能:

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),
);

我的render()功能的部分片段:

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

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

我正确使用选择器吗？

Answer 1

绝对没有必要将isSubmitting选择器与reduxFormhoc 一起使用。hocreduxForm将传递一个submitting可用于检查表单是否正在提交的 prop。但 redux-form 需要知道它何时提交。如果你onSubmit返回一个 Promise 以外的值，则submittingprop 将始终为false，redux-form 根本无法判断提交何时完成，但如果onSubmit返回一个 Promise （如 @Sreeragh AR 建议），那么它将设置submittingprop直到承诺得到解决或拒绝为止。

也就是说，还有其他需要注意的事情：您isSubmitting在 中使用选择器创建器mapStateToProps，这真的很糟糕。这将为每个重新渲染创建一个选择器。执行此操作的正确方法是使用函数createMapStateToProps。

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),
);