Encountering 'Uncaught (in promise) error' with redux-form Server-side Validation

#react #redux #reduxform #tips

This article was originally published on bmf-tech.com.

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
}