尝试使用isSubmitting选择器的redux形式

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选择器与reduxForm hoc一起使用。 reduxForm hoc将传递一个submitting属性，该属性可用于检查表单是否正在提交。但是redux-form需要知道什么时候提交。如果您的onSubmit返回的值不是Promise，则submitting属性将始终为false，redux-form根本无法告知提交完成的时间，但是如果onSubmit确实返回了 promise (如建议的@Sreeragh AR)，那么会将submitting属性设置为true，直到 promise 被解决或被拒绝。

就是说，还有其他需要注意的地方:您在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),
);