承諾redux表單onSubmit函數

Question

我想使我的SubmitForm用於redux表單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') };
}

Answer 1

我相信您在想這是錯誤的方式。 redux-form 已經具有一種在提交表單時處理承諾 （“承諾”） 的機制 。 從文檔：

如果您的onSubmit函數返回一個Promise，則Submitting屬性將設置為true，直到Promise被解決或拒絕為止。 如果它被包含格式為{field1：'error'，field2：'error'}的錯誤的redux形式的SubmissionError拒絕，則提交錯誤將被添加到每個字段（錯誤道具），就像異步驗證錯誤是。 如果存在不是特定於任何字段但適用於整個表單的錯誤，則可以傳遞該錯誤，就好像它是稱為_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);

請參閱此示例 ，以獲取有關如何處理提交表單時的承諾的更詳細說明。

Answer 2

您需要讓submit()返回一個thunk才能使dispatch(submit())在使用react-redux時返回Promise ：

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的函數。