여러분은 프런트 엔드를 구현할 때 어떻게 합니까?

react이거나, vu이거나, 혹은 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를 실행하는 것이 기분 나쁜 느낌이므로, 좀 더 다른 방법이 없는지 조사해 보는 느낌…