Обещание избыточной формы функции onSubmit - PullRequest
Новая
       12

Обещание избыточной формы функции onSubmit

0 голосов
/ 05 сентября 2018

Я бы хотел, чтобы мой submitForm для обработки избыточной формы onSubmit был обещан.

То же, что и в примере, найденном здесь https://redux -form.com / 7.1.2 / examples / submitvalidation / 

submitForm = () => {
     return this.props.submituserForm() 
        .then(() => { console.log('test') })
        .catch(() => { console.log('error') })
}

-----------------------------------


const mapDispatchToProps = (dispatch) => {
    // i want to promisify submituserForm to behave like the sleep 
    // function below
    return {
        submituserForm: () => dispatch(submit())
    }
};

//////////////////////////////////////////////////// 


// this part is working fine
const submit = () => {
    const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

    // simulate server latency
    return sleep(5000)
        .then(() => { console.log('test') };
}

Ответы [ 2 ]

0 голосов
/ 06 сентября 2018

Я думаю, вы думаете об этом неправильно. redux-form уже имеет механизм обработки обещаний («обещающий») при отправке формы. Из документов:

Если ваша функция onSubmit возвращает обещание, свойство отправки будет иметь значение true, пока обещание не будет разрешено или отклонено. Если он отклонен с помощью SubmissionError в форме редукса, содержащего ошибки в форме {field1: 'error', field2: 'error'}, то ошибки отправки будут добавлены в каждое поле (в пропозицию ошибок), так же как и ошибки асинхронной проверки. , Если есть ошибка, которая не является специфичной для какого-либо поля, но применима ко всей форме, вы можете передать ее, как если бы она была ошибкой для поля с именем _error, и она будет указана в качестве пропуска ошибки.

Это будет работать: 

// submit.js
import { SubmissionError } from "redux-form";

export const submit = (values, dispatch, props) => {
    const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

    // simulate server latency
    return sleep(5000)
        .then(() => { console.log('test') })
        .catch(() => {
            console.error('error');
            throw new SubmissionError({ _error: 'There was an error submitting.' });
        });
}

// MyForm.js
import React from "react";
import { reduxForm, ... } from "redux-form";
import { submit } from "submit";

class MyForm extends React.Component {
    ...
    render() {
        const { error, handleSubmit } = this.props;
        return (
            <form onSubmit={handleSubmit}>
                ...
                {error && <strong>{error}</strong>}
                <button type="submit" value="Submit">Submit</button>
            </form>
        )
    }        
};

export default reduxForm({
    form: "MyForm",
    onSubmit: submit
})(MyForm);

См. этот пример для более подробного объяснения того, как обрабатывать обещания при отправке вашей формы.

0 голосов
/ 06 сентября 2018

Вам нужно, чтобы submit() возвращал thunk, чтобы dispatch(submit()) возвращал Promise при использовании react-redux: 

const submit = () => {
  return (dispatch, getState) => {
    const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

    // simulate server latency
    return sleep(5000)
      .then(() => { console.log('test') };
  }
}

В настоящее время вместо него возвращается Promise, а это не то, что нужно redux-thunk. Скорее вам нужно вернуть функцию , которая возвращает Promise .

...