Overview

This post discusses an issue encountered when implementing server-side validation with redux-form. While manipulating promises and throwing redux-form's SubmissionError, an Uncaught (in promise) error occurred.

Solution

The issue was simply due to a missing return statement.

Before Fix

class Categories extends Component {
  onSubmit(props) {
    const {createCategory, fetchCategories, reset} = this.props;

    createCategory(props).then((res) => {
      if (res.error) {
        console.log('error');
        throw new SubmissionError({name: 'User does not exist', _error: 'Login failed!'});
      } else {
        console.log('success');
        reset();
        fetchCategories();
      }
    });
  }

  // Other parts omitted
}

After Fix

class Categories extends Component {
  onSubmit(props) {
    const {createCategory, fetchCategories, reset} = this.props;

    return createCategory(props).then((res) => {
      if (res.error) {
        console.log('error');
        throw new SubmissionError({name: 'User does not exist', _error: 'Login failed!'});
      } else {
        console.log('success');
        reset();
        fetchCategories();
      }
    });
  }

  // Other parts omitted
}

Thoughts

JavaScript is tough. I still don't fully understand promises (I only know they make callbacks easier...).

If you're creating an SPA with Laravel and React, please join us at Lara Cafe! (Help needed)

References

Redux Form -Submit Validation Example throw new SubmissionError() causing Uncaught (in promise) error