redux-saga 미들웨어에서의 에러 처리_axios에서의 에러 핸들링

문제

서버와의 API 통신 도중 비동기적 처리의 인식과 제어를 효율적으로 하기 위해 다음과 같이 redux-saga 미들웨어를 이용한 유틸 함수를 만들었다.

export const createRequestActionTypes = type => {
  const SUCCESS = `${type}_SUCCESS`;
  const FAILURE = `${type}_FAILURE`;
  return [type, SUCCESS, FAILURE];
};

export default function createRequestSaga(type, request) {
  const SUCCESS = `${type}_SUCCESS`;
  const FAILURE = `${type}_FAILURE`;

  return function* (action) {
    yield put(startLoading(type));

    try {
      const response = yield call(request, action.payload);
      yield put({
        type: SUCCESS,
        payload: response.data,
      });
    } catch (error) {
      yield put({
        type: FAILURE,
        payload: error,
        error: true,
      });
    }
    yield put(finishLoading(type));
  };
}

 

제너레이터 함수 내에서 call() 함수가 반환하는 결과 값에 따라서 각기 다른 후속 처리를 하는 유틸 함수를 작성하였는데, 에러 처리에 대한 액션을 트리거하였을 때 제대로 된 에러 처리를 할 수 없는 문제가 발생하였다.

 

 

문제해결

해당 문제는 redux-sage 미들웨어에서 발생한 문제가 아닌 axios 에러 처리에 대해서 미흡하게 알고 있었던 것에서 발생하였다.

 

리듀서 내에서 API 도중 에러 처리를 담당하는 액션의 경우를 코드로 살펴보면 다음과 같다.

const auth = handleActions(
  {
  
    ( ... )
    
    [DUPLICATIONCHECK_FAILURE]: (state, { payload: error }) => ({
      ...state,
      authError: response.data.message,
    })
  },
  initialState
);

 

서버에 이미 존재하는 유저일 경우, 중복 에러가 발생되고 해당 에러에 대한 내용을 [DUPLICATIONCHECK_FAILURE] 액션에서 처리해 주도록 코드를 작성하였다.

 

하지만 error에 대한 정보를 put() 인자에 담아 리듀서 내에서 디스트럭쳐링을 통해 error 키 값을 state에 바로 저장하는 처리 단계에서 문제가 발생했던 것이다.

 

서버에서 반환한 에러는 여러 정보를 담고 있는 객체의 형태이다.

https://yamoo9.github.io/axios/guide/error-handling.html

오류 처리 | Axios 러닝 가이드

 

현재 해당 로직에서 필요한 값은 회원 가입을 진행하였을 때 이메일을 토대로 해당 유저가 존재하는 경우에 'DUPLICATION ERROR' message를 받는 것인데, 해당 값은 전달 받은 error에 바로 바인딩된 것이 아닌 내부 키 값으로 존재하였다.

 

그래서 다음과 같이 에러에 대한 각 정보를 콘솔로 확인해보니 현재 필요한 정보가 error.response.data 내에 message에 존재하는 것을 확인할 수 있었다.

return client
    .post(`${API.baseUrl}users/${currentCheckInputAPI}`, {
      [currentCheckKey]: currentCheckInputValue,
    })
    .then(res => console.log(res.message))
    .catch(error =>
      console.log(
        error.response.data,
        error.response.status, 
        error.response.headers
      )
    );

 

이에 리듀서 내에서 해당 값을 store에 저장해주기 위해 다음과 같이 코드를 수정하여 문제를 해결하였다.

const auth = handleActions(
  {
  
	( ... )
    
    [DUPLICATIONCHECK_FAILURE]: (state, { payload: { response } }) => ({
      ...state,
      authError: response.data.message,
    })
  },
  initialState
);