[프론트엔드] 리덕스 미들웨어를 통한 비동기 작업 관리[10]

 

1. redux-saga 

 

1. 4 코드 리펙토링

 

이번에는 반복되는 코드를 함수화하여 리펙토링을 진행 하겠습니다.

이전에 thunk 함수를 위해 만든 createRequestThunk 함수처럼 createRequestSaga를 만들겠습니다.

 

 

- lib/createRequestSaga.js

 

import { call, put } from "redux-saga/effects";
import { startLoading, finishLoading } from "../modules/loading";

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 (e) {
      yield put({
        type: FAILURE,
        payload: e,
        error: true,
      });
    }
    yield put(finishLoading()); // 로딩 종료
  };
}

 

 

1. 5 참고하면 좋은 유용한 기능들

 

이번에는 redux-saga가 제공하는 기능중에서 알아 두면 유용한 몆가지 기능을 알아 보겠습니다.

먼저 Saga 내부에서 현재 상태를 조회하는 방법입니다.

 

- modules/counter.js

 

import { createAction, handleActions } from "redux-actions";
import { delay, put, takeEvery, takeLatest, select } from "redux-saga/effects";

(...)

  yield delay(1000); // 1초 대기
  yield put(increase()); // 특정 액션을 디스패치
  const number = yield select((state) => state.counter); // state -> 스토어 상태 의미
  console.log(`현재 값은 ${number}입니다.`);
}

(...)

이제 CounterContainer를 다시 App에서 랜더링 하고 +1 버튼을 눌러보세요.

콘솔 에서 redux 스토어 상태값을 확인 하실 수 있을 겁니다.

 

 

 

이렇게 Saga 내부에서 현재 상태를 참조해야 하는 상황이 생기면 select를 사용하시면 됩니다.

이번에는 Saga가 실행되는 주기를 제한하는 방법입니다.

 

takeEvery 대신 throttle  이라는 함수를 사용하면 사가가 초 단위로 한번만 호출되도록 설정할 수 있습니다.

 

예시로  아래와 같이 counterSaga를 다음과 같이 수정하면 increaseSaga는 4초에 한번씩만 호출하게 됩니다.

 

/* eslint-disable no-unused-vars */
import { createAction, handleActions } from "redux-actions";
import {
  delay,
  put,
  takeEvery,
  takeLatest,
  select,
  throttle,
} from "redux-saga/effects";

(...)

function* increaseSaga() {
  yield delay(1000); // 1초 대기
  yield put(increase()); // 특정 액션을 디스패치
  const number = yield select((state) => state.counter); // state -> 스토어 상태 의미
  console.log(`현재 값은 ${number}입니다.`);
}

(...)

 

이제 counter버튼을 클릭하여 설정한 시간에 맞춰서 카운터가 올라가는지를  확인해 보세요.

 

 

1. 6 정리

 

redux-saga는 이와에도 비동기 작업을 처리하기 위한 다양한 미들웨어와 util 기능들을 제공합니다.

자세한 내용은 아래의 reduxs-saga 매뉴얼(https://redux-saga.js.org/) 을 참고해 보세요.

 

 

 

2. 마치며..

 

이번에는 리덕스 미들웨어의 종류를 알아보고, 비동기 작업을 미들웨어로 어떻게 처리하는지에 대하여 확인 해보았습니다.

 

 

1. redux 미들웨어 

• 특정 조건에 따라 액션 수행 여부를 판단 할 수 있다.
• 액션을 콘솔에 출력하거나 서버쪽에 로깅
• 액션이 디스패치 되었을 때 데이터를 수정/가공하여 리듀서에게 전달함
• 비동기적인 작업을 수행함.

 

2. redux-thunk 

• 장점 : 사용법이 간단하다.
• 단점 : 작업 도중에 잘못된 설계로 callback 지옥에 빠질 가능성이 있다.

 

3. redux-saga

• 장점 : 비동기 처리와 action에 대한 디자인 설계를 깔끔하게 작업 할 수 있다.  
• 단점 : 처음 작업시에 설정해야 할 것들이 다수 있으며 generator와 신규 개념의 대한 이해와 학습이 필요하다.

 

 

GitHub - S-YC/Redux-middleware: 리엑트 미들웨어 비동기 작업 이해하기