CODEWITHSUNDEEP
javascriptreduxpromisereact-reduxredux-form
Alias Alias
Alias Alias

Reputation: 41

Promisifying a redux form onSubmit function

I would like to make my submitForm for the redux form onSubmit handling to be promisified.

same as the example found here 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') };
}

Upvotes: 0

Views: 1432

Answers (2)

inostia
inostia

Reputation: 8023

I believe you're thinking about this the wrong way. redux-form already has a mechanism for handling promises ("promisifying") on submit of the form. From the docs:

If your onSubmit function returns a promise, the submitting property will be set to true until the promise has been resolved or rejected. If it is rejected with a redux-form SubmissionError containing errors in the form { field1: 'error', field2: 'error' } then the submission errors will be added to each field (to the error prop) just like async validation errors are. If there is an error that is not specific to any field, but applicable to the entire form, you may pass that as if it were the error for a field called _error, and it will be given as the error prop.

This will work:

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

See this example for a more detailed explanation of how to handle promises on submission of your form.

Upvotes: 1

Jacob
Jacob

Reputation: 78840

You need to have submit() return a thunk in order for dispatch(submit()) to return a Promise when using 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') };
  }
}

Currently it's returning a Promise instead, which is not what redux-thunk needs. Rather, you need to return a function that returns a Promise.

Upvotes: 0

Related Questions