概要

redux-formでサーバーサイドのバリデーションを実装している時に、promissをいじってredux-formのSubmissionErrorを投げていたらUncaught (in promise) errorと怒られた話です。

解決策

returnがなかっただけでした。

修正前

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();
      }
    });
  }

  // 以下色々省略
}

修正後

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();
      }
    });
  }

  // 以下色々省略
}

所感

jsむずい。promissまだ良くわかっていない。（コールバックを楽にするためのもの程度の認識。。。）

Laravel×ReactでSPAつくっているよーという方、ぜひLara Cafe にご参加ください！（助けてぇ）

参考

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