redux-form пытается использовать селектор isSubmitting

У меня есть следующий компонент redux-form, и я хочу использовать селектор isSubmitting, чтобы отключить кнопку отправки. Однако он никогда не возвращает истину, когда форма отправляет

Моя 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}
      >

Правильно ли я использую селектор?


redux-form
person snowflakekiller    schedule 17.10.2017    source источник
comment
Привет! Не могли бы вы показать функцию handleSubmit?   -  person Ilya Lyamkin    schedule 21.10.2017
comment
Флаг отправки работает только в том случае, если ваш onSubmit возвращает обещание, так что redux-form может отслеживать, когда он начинается и заканчивается. github.com/erikras/redux-form/issues/1238   -  person Sreeragh A R    schedule 26.10.2017

Ответы (1)


arrow_upward
1
arrow_downward

Абсолютно не нужно использовать селектор isSubmitting с reduxForm hoc. reduxForm hoc передаст опору submitting, которую можно использовать для проверки того, отправляется ли форма. Но redux-form должна знать, когда она отправляется. Если ваш onSubmit возвращает значение, отличное от Promise, свойство submitting всегда будет false, redux-form просто не имеет возможности узнать, когда отправка завершена, но если onSubmit действительно возвращает обещание (например, @Sreeragh AR), тогда он установит для свойства submitting значение true, пока обещание не будет выполнено или отклонено.

Тем не менее, есть еще кое-что, на что следует обратить внимание: вы используете создатель селектора 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),
);
person Dennie de Lange    schedule 04.02.2018