24.2.3.4 더 쉬운 API 요청 상태 관리

    다음으로 redux-saga를 통해 더 쉽게 API를 요청할 수 있도록 loading 리덕스 모듈과 createRequestSaga 유틸 함수를 설정하겠습니다.

    먼저 loading 리덕스 모듈을 작성하세요.

    modules/loading.js

    import { createAction, handleActions } from 'redux-actions';
    
    const START_LOADING = 'loading/START_LOADING';
    const FINISH_LOADING = 'loading/FINISH_LOADING';
    
    /*
     요청을 위한 액션 타입을 payload로 설정합니다. (예: "sample/GET_POST")
    */
    
    export const startLoading = createAction(
      START_LOADING,
      requestType => requestType,
    );
    
    export const finishLoading = createAction(
      FINISH_LOADING,
      requestType => requestType,
    );
    
    const initialState = {};
    
    const loading = handleActions(
      {
        [START_LOADING]: (state, action) => ({
          ...state,
          [action.payload]: true,
        }),
        [FINISH_LOADING]: (state, action) => ({
          ...state,
          [action.payload]: false,
        }),
      },
      initialState,
    );
    
    export default loading;

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