18.3.1.5 리팩토링

    API를 요청해야 할 때마다 17줄 정도 되는 thunk 함수를 작성하는 것과 로딩 상태를 리듀서에서 관리하는 작업은 귀찮을 뿐 아니라 코드도 길어지게 만듭니다. 그러므로 반복되는 로직을 따로 분리하여 코드의 양을 줄여 봅시다.

    lib/createRequestThunk.js

    export default function createRequestThunk(type, request) {
      // 성공  실패 액션 타입을 정의합니다.
      const SUCCESS = `${type}_SUCCESS`;
      const FAILURE = `${type}_FAILURE`;
      return params => async dispatch => {
        dispatch({ type }); // 시작됨
        try {
          const response = await request(params);
          dispatch({
            type: SUCCESS,
            payload: response.data
          }); // 성공
        } catch (e) {
          dispatch({
            type: FAILURE,
            payload: e,
            error: true
          }); // 에러 발생
          throw e;
        }
      };
    }
    
    // 사용법: createRequestThunk('GET_USERS',api.getUsers);

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.