26.2.4 페이지네이션 구현하기

    이번에는 페이지네이션 기능을 구현해 봅시다. list API를 만들 때 마지막 페이지 번호를 HTTP 헤더를 통해 클라이언트에 전달하도록 설정했습니다. 그러나 요청을 관리하는 사가를 쉽게 만들기 위해 작성한 createRequestSaga에서는 SUCCESS 액션을 발생시킬 때 payloadresponse.data 값만 넣어 주기 때문에 현재 구조로는 헤더를 확인할 수 없습니다.

    그렇기 때문에 createRequestSaga를 조금 수정해 주겠습니다.

    lib/createRequestSaga.js

    (...)
    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,
            meta: response,
          });
        } catch (e) {
          yield put({
            type: FAILURE,
            payload: e,
            error: true,
          });
        }
        yield put(finishLoading(type)); // 로딩 끝
      };
    }

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