みなさんはフロントエンドを実装する時ってどうしてますか？

reactだったり、vueだったり、あるいはElmだったり、そこまで使う規模じゃないのでjQueryっていうパターンも。みんな違ってみんな良いとは思います。

なんですが、今回はreact+redux-formを使っていて、
サーバーからのエラー表示で困ったということがあったりするので、備忘録も兼ねてエラー表示の方法でも。

以前に書いたこの記事の派生的な

tutorial通りにエラーを表示する！

はい、タイトルの通りです。

tutorial.jsx

<form onSubmit={handleSubmit(submit)}>

// 略

function submit(values) {
  return sleep(1000) // simulate server latency
    .then(() => {
      if (![ 'john', 'paul', 'george', 'ringo' ].includes(values.username)) {
        throw new SubmissionError({ username: 'User does not exist', _error: 'Login failed!' })
      } else if (values.password !== 'redux-form') {
        throw new SubmissionError({ password: 'Wrong password', _error: 'Login failed!' })
      } else {
        window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`)
      }
    })
}

tutorial的にはこんな感じで書いてあげれば良さそうです。

dispatchの中からredux-formにエラーを渡したい！

なんですが、今回はこのタイトルのパターンなんですね。

dame.jsx

import { SubmissionError } from 'redux-form';

export const hogeAction = (value) = dispatch => {
  console.log(value);
  const error = nanikaSugoiShori();

  // エラーが帰ってきたとして……
  throw new SubmissionError(error);
};

これだとOKなんですね。
正しくredux-formにerrorを渡せてあげられます！

ただ、サーバ側の処理する……ということになると、どうしても非同期処理になってしまって。
特に何も考えずに実装してしまうと……

dame.jsx

export const hogeAction = (value) = dispatch => {
  console.log(value);

  nanikaSugoiHidoukiShori().catch(error => {
    throw new SubmissionError(error);
  });
};

// Uncaught (in promise)

みたいなのだと、エラーが出てきてしまいます

ok.jsx

import { stopSubmit } from 'redux-form';

export const hogeAction = (value) = dispatch => {
  console.log(value);

  // 何かAPIを実行してエラーが帰ってきた！
  nanikaSugoiHidoukiShori().catch(error => {
    // エラーが帰ってきた時の処理
    dispatch(stopSubmit('対象のformの名前', error));
  });
};

これで正しくエラーが出るようになりました！
なんですけど、stopSubmitを実行するのが気持ち悪い感じなので、もうちょっと他の方法がないか調べてみる感じ……