Async-Validation을 사용하여 Redux-Form 경고를 표시하는 방법

제목: Redux-Form에서 비동기 유효성 검증을 통한 경고 표시하는 방법

소개

Redux-Form은 폼에서 유효성 검증을 지원하는 인기있는 라이브러리로, 오류 메시지를 제공하고 오류가 발생할 때 폼 제출을 방지합니다. 그러나 Redux-Form은 공식적으로 비동기 유효성 검증에 대한 경고를 직접 지원하지 않습니다. 이 블로그 포스트에서는 Redux-Form을 사용할 때 비동기 유효성 검증을 이용하여 경고를 표시하는 해결 방안을 살펴보겠습니다. 두 가지 가능한 해결책에 대해 논의하고 코드 예제를 제공할 것입니다.

솔루션 1: Reducer.Plugin() 사용

한 가지 접근 방식은 루트 리듀서에서 reducer.plugin()을 사용하여 Redux Form의 비동기 유효성 검증 완료 액션 @@redux-form/STOP_ASYNC_VALIDATION을 대기하도록 하는 것입니다. 에러를 경고로 변환하고 syncWarnings로 주입함으로써 경고를 meta.warning으로 필드에 전달할 수 있습니다. 이 솔루션을 구현하는 방법의 예시입니다:

const errorToWarning = (state, action) => {
  switch (action.type) {
    case "@@redux-form/STOP_ASYNC_VALIDATION":
      const { asyncErrors, ...noErrors } = state;
      const syncWarnings = action.payload || undefined;
      return { ...noErrors, syncWarnings };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  form: formReducer.plugin({
    MyForm: errorToWarning
  }),
  // 다른 리듀서들
});

export default rootReducer;

솔루션 2: 커스텀 액션 디스패치

다른 접근 방식은 폼의 비동기 유효성 검증 콜백에서 사용 가능한 dispatch 함수를 활용하는 것입니다. 경고를 전역 Redux 상태 객체에 추가하는 커스텀 액션을 디스패치함으로써 원하는 기능을 구현할 수 있습니다. 다음은 이에 대한 예시입니다:

export const asyncValidate = async (values, dispatch) => {
  const someNonUniqueValueAlreadyExists = await db.findOne('someProperty', values.someValue);

  if (someNonUniqueValueAlreadyExists) {
    // 전역 상태에 경고 추가하는 액션 디스패치
    dispatch(addWarning('someProperty의 someValue에 이 값으로 사용할 확신이 있나요?'));
  }
};

결론

Redux-Form은 비공식적으로 비동기 유효성 검증과 경고를 함께 지원하지 않지만, 두 가지 유효한 해결책을 알아봤습니다. reducer.plugin()을 사용하거나 커스텀 액션을 디스패치함으로써 비동기 유효성 검증과 함께 경고를 표시할 수 있습니다. 애플리케이션의 특정 요구 사항을 고려하고 본인의 필요에 가장 잘 맞는 솔루션을 선택하는 것이 중요합니다.

이 블로그 포스트가 Redux-Form 경고와 비동기 유효성 검증의 도전에 대한 유용한 정보와 해결책을 제공해 드리길 바랍니다. 이제 복잡한 마이그레이션 작업 없이도 계속해서 redux-forms를 사용하실 수 있습니다. 추가 질문이나 제안 사항이 있으시면 아래 댓글에서 자유롭게 공유해 주세요. 즐거운 코딩되세요!

참고 자료 : 

reactjs