[React] Redux-saga - 비동기 작업을 더 쉽게 관리할 수 있게 해주는 미들웨어

 

redux-saga는 Redux에서 비동기 작업(예: API 호출)을 더 쉽게 관리할 수 있게 해주는 미들웨어이다. redux-saga는 제너레이터 함수(generator function)를 사용하여 비동기 로직을 작성할 수 있으며, 이를 통해 코드의 가독성과 유지보수성을 높일 수 있다.

 

아래 코드를 예시로, redux-saga가 어떤 역할을 하는지 설명하겠다.

import { call, put, takeLatest, all } from 'redux-saga/effects';
import axios from 'axios';
import { fetchWeatherSuccess, fetchWeatherFailure } from './config/action';
import { FETCH_WEATHER_REQUEST } from './config/constant';

// 비동기 작업을 처리하는 제너레이터 함수
function* fetchWeatherSaga() {
  try {
    // API 호출
    const response = yield call(
      axios.get,
      'http://localhost:3001/current_weather',
    );
    // API 호출이 성공하면 성공 액션을 디스패치
    yield put(fetchWeatherSuccess(response.data));
  } catch (error) {
    // API 호출이 실패하면 실패 액션을 디스패치
    yield put(fetchWeatherFailure(error.message));
  }
}

// 루트 사가: 모든 사가를 합치는 곳
function* rootSaga() {
  // 특정 액션 타입이 디스패치될 때 지정된 사가를 실행
  yield all([takeLatest(FETCH_WEATHER_REQUEST, fetchWeatherSaga)]);
}

export default rootSaga;

 

주요 개념

1. 제너레이터 함수:
   • function* fetchWeatherSaga() { ... }와 같은 제너레이터 함수를 사용하여 비동기 로직을 작성한다. 제너레이터 함수는 yield 키워드를 사용하여 함수 실행을 일시 중지하고 재개할 수 있다.' function* ' 접두사가 이 함수가 제너레이터 함수라는 뜼이다. 이 키워드를 사용하여 만든 제너레이터 함수는 호출 했을 때 한 객체를 반환하는데, 이를 제너레이터 혹은 이터레이터 객체라고 부른다. 제너레이터의 내부 코드를 실행하기 위해서는 이 객체가 가지고 있느 next메서드를 호출하는데 enxt 메서드 호출 시마다 순차적으로 원소들을 탐색하고 yield키워드에서 반환한다. 
2. call 이펙트:
   • yield call(axios.get, 'http://localhost:3001/current_weather')는 axios.get 함수를 호출하여 API 요청을 수행한다. call 이펙트를 사용하면 함수 호출을 효과적으로 제어할 수 있다.
3. put 이펙트:
   • yield put(fetchWeatherSuccess(response.data))는 Redux 액션을 디스패치한다. put 이펙트를 사용하여 사가에서 Redux 상태를 업데이트할 수 있다.
4. takeLatest 이펙트:
   • takeLatest(FETCH_WEATHER_REQUEST, fetchWeatherSaga)는 FETCH_WEATHER_REQUEST 액션이 디스패치될 때마다 fetchWeatherSaga를 실행다. 만약 FETCH_WEATHER_REQUEST 액션이 여러 번 디스패치되면, 마지막 요청만 처리한다.
5. all 이펙트:
   • yield all([...])는 여러 사가를 병렬로 실행한다. 여기서는 takeLatest를 사용하여 특정 액션이 디스패치될 때 실행할 사가를 지정한다.

 

출처 ㅣ https://tech.trenbe.com/2022/05/25/Redux-Saga.html

예제 동작 과정

1. 액션 디스패치:
   • 컴포넌트나 다른 곳에서 FETCH_WEATHER_REQUEST 액션이 디스패치된다.
2. 사가 실행:
   • rootSaga에서 takeLatest 이펙트를 통해 FETCH_WEATHER_REQUEST 액션을 감지하고 fetchWeatherSaga를 실행한다.
3. API 호출:
   • fetchWeatherSaga는 axios.get을 사용하여 API 호출을 수행한다. 이 때 call 이펙트를 사용하여 호출한다.
4. 성공/실패 처리:
   • API 호출이 성공하면 fetchWeatherSuccess 액션을 디스패치하고, 실패하면 fetchWeatherFailure 액션을 디스패치한다. put 이펙트를 사용하여 액션을 디스패치한다.
5. 상태 업데이트:
   • 디스패치된 성공/실패 액션에 따라 Redux 리듀서가 상태를 업데이트한다.

이 과정을 통해 redux-saga를 사용하여 비동기 작업을 효과적으로 관리할 수 있다. redux-saga는 복잡한 비동기 로직을 간결하게 작성할 수 있게 해주며, 테스트하기도 용이다.