throwing redux-form submissions errors from handleSubmit functions

Question

I have a redux-form which has a handleSubmit function which I use to make some async http server authentication. If the authentication fails for some reason, I want to throw a redux-form error. If I throw a "SubmissionError" I get an error message saying: Uncaught (in promise)

My code:

class MyLoginForm extends Component {
    handleSubmit({ email, password }) {
        axios.post("http://API_SERVER/login", null, { withCredentials: true, auth: { username: email, password: password } })
            .then((response) => {
                console.log('HTTP call success. JWT Token is:', response.data);
            })
            .catch(err => {
                console.log(err)
 >>>> WHAT TO DO TO CONVEY THE ERROR IN THE REDUX-FORM <<<<
                if (err.response) {
                    
                    if (err.response.status !== 200) {
                        console.log("Unexpected error code from the API server", err.response.status);
                        throw new SubmissionError({ _error: 'HTTP Error. Possibly invalid username / password' });
                    }
                    return
                }
                throw new SubmissionError({ _error: 'HTTP Error. Please contact Helpdesk' });
            });
    }

    render() {
        const { error, handleSubmit, pristine, reset, submitting } = this.props
        return (
            <form onSubmit={handleSubmit(this.handleSubmit.bind(this))}>
                <Field name="email" type="email" component={renderField} label="Email Address" />
                <Field name="password" type="password" component={renderField} label="Password" />
                {error && <strong>{error}</strong>}
                <div>
                    <button type="submit" disabled={submitting}>Log In</button>
                    <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
                </div>
            </form>
        )
    }
}

export default connect(null, actions)(reduxForm({
    form: ‘MyLoginForm' // a unique identifier for this form
})(MyLoginForm));

I want a solution to update/render the error message in the redux-form itself without creating anything in the global state, reducers, etc.

Just checking, since I can't see it in the code above - you have added `import { SubmissionError } from 'redux-form'`, right? — Deividas Karzinauskas, Mar 03 '17 at 19:42
You could try what @ptim has done in the answer for this question http://stackoverflow.com/questions/34142678/make-server-validation-using-redux-form-and-fetch-api. Wrap your api call in a Promise and use the reject callback in your catch. Since the promise is rejected, redux form will display error as written here http://redux-form.com/6.0.0-rc.1/examples/submitValidation/ — Vaibhav Bansal, Mar 04 '17 at 13:34
axios already does that. It makes the http call response handling a promise iiuc — Sankar, Mar 16 '17 at 17:11
Vaibhav: You pointed me in the right direction. I just had to make the axios thing into a promise. I would love to accept it as an answer if you could add a solution. Or shall I add one myself ? I've got it working. Thanks. — Sankar, Mar 16 '17 at 17:21

score 6 · Accepted Answer · answered Mar 17 '17 at 11:37

The solution is simple. I just had to add a return in front of the axios call. So the updated code will be like:

handleSubmit({ email, password }) {
    return axios.post("http://API_SERVER/login", null, { withCredentials: true, auth: { username: email, password: password } })
        .then((response) => {
            console.log('HTTP call success. JWT Token is:', response.data);
        })

throwing redux-form submissions errors from handleSubmit functions

1 Answers1