みなさんはフロントエンドを実装する時ってどうしてますか?
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を実行するのが気持ち悪い感じなので、もうちょっと他の方法がないか調べてみる感じ……