0

I am currently stuck on an issue. What I wish to achieve is to return the error message from my ApiClient to my redux-form instance to display the message to the end-user. I am working on a simple login form as example.

My form is the following:

const LoginForm = props => {
    const onSubmit = (formProps) => {
        return new Promise((values, reject) => {
            props.dispatch(login(formProps.username, formProps.password));
            Promise.resolve();
        });
    }

    const { handleSubmit } = props;

    return (
    <form className="form" onSubmit={handleSubmit(onSubmit.bind(this))}>
      <div className="flex_horizontal_row container_connexion">
        <div className="width_40 flex_horizontal_column">
          <Field
            name="username"
            component={renderField}
            type="text"
            placeholder="E-mail*"
          />
          <Field
            name="password"
            component={renderField}
            type="text"
            placeholder="Mot de passe*"
          />
          <button type="submit" className='input_submit input_submit_big'>
              Se Connecter
          </button>
        </div>
      </div>
    </form>
    );
}

The associated action looks like the following:

export function login( username, password ){
  return (dispatch) => {
    var auth = services.auth.api.login( { 'data': { 'data': { 'username': username, 'password': password } } } ).then( function( response ) {
        dispatch( loginSuccess( response ) );
    }).catch( ( e ) => {
        console.log( e );
        dispatch( loginError( e ) );
        return Promise.reject( new SubmissionError({_error: e}));
    });
  };
}

I am using SubmissionError, Field and reduxForm from redux-form/immutable. What I do understand is that my call to the login action is actually returning a promise, but instanciating the SubmissionError object is returning one too so it fails as I do have nesting Promises with the latter badly handled ?

The precise issue is : Unhandled promise rejection on the 

errors: Object { _error: Error }
message: "Submit Validation Failed"
name: "SubmissionError"
stack: "ExtendableError@http://localhost/app.js:23204:14\nSubmissionError@http://localhost/app.js:28229:51\nlogin/</auth<@http://localhost/app.js:65859:45\nrun@http://localhost/app.js:66871:22\nnotify/<@http://localhost/app.js:66884:30\nflush@http://localhost/app.js:67212:9\n"

I have no clue on the proper way to return and handle the submissionError to display information in my component, and have read tons of pages including the github issues of redux-form, different SO threads and the official documentation.

If you have any idea, let me know !

Balessan
  • 2,456
  • 2
  • 12
  • 20
  • Your promise in `onSubmit` is never settled. – Bergi Feb 28 '18 at 16:19
  • What is `handleSubmit`? – Bergi Feb 28 '18 at 16:21
  • @Bergi : What do you mean by `never settled` ? handleSubmit : `Form/_this.submit()` – Balessan Feb 28 '18 at 16:28
  • I mean that you never resolve the `new Promise`. You would need to call `values` or `reject`. Though probably [you shouldn't use the `Promise` constructor at all](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it)! – Bergi Feb 28 '18 at 16:30

0 Answers0