26.2.4 페이지네이션 구현하기

이번에는 페이지네이션 기능을 구현해 봅시다. list API를 만들 때 마지막 페이지 번호를 HTTP 헤더를 통해 클라이언트에 전달하도록 설정했습니다. 그러나 요청을 관리하는 사가를 쉽게 만들기 위해 작성한 createRequestSaga에서는 SUCCESS 액션을 발생시킬 때 payload에 response.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)); // 로딩 끝
  };
}

---