[javascript] 리덕스에서 비동기 처리를 위한 redux-saga 사용 방법

22 Dec 2023

javascript

리덕스는 JavaScript 애플리케이션의 상태를 효율적으로 관리하기 위한 도구입니다. 비동기 작업을 처리할 때 redux-saga라는 middleware를 사용하여 비동기 작업을 보다 쉽게 관리할 수 있습니다. 이 포스트에서는 redux-saga를 사용하여 리덕스 애플리케이션에서 비동기 작업을 처리하는 방법에 대해 알아보겠습니다.

redux-saga란?

redux-saga는 리덕스의 미들웨어로서, 애플리케이션의 비동기 작업을 관리하기 위한 도구입니다. 이를 통해 애플리케이션의 사이드 이펙트를 좀 더 예측 가능하고 효과적으로 다룰 수 있습니다. redux-saga는 제너레이터 함수를 기반으로 동작하며, 액션을 모니터링하고, 필요에 따라 비동기 작업을 수행하고, 다시 결과를 디스패치할 수 있습니다.

redux-saga의 주요 개념

1. 제너레이터 함수 (Generator Function)

redux-saga는 제너레이터 함수를 활용하여 비동기 작업을 수행합니다. 제너레이터 함수는 호출자에 의해 일시 중지되거나 재개될 수 있는 함수로, 비동기 작업을 동기적으로 작성할 수 있게 해줍니다.

function* fetchData() {
  // 비동기 작업을 수행하는 코드
}

2. 액션 (Action)

redux-saga는 redux의 액션을 모니터링하여 특정 액션이 발생했을 때 특정 작업을 수행하도록 설정할 수 있습니다.

import { takeEvery, put } from 'redux-saga/effects';

function* fetchData() {
  // 비동기 작업을 수행하는 코드
  yield put({ type: 'FETCH_SUCCESS', data });
}

function* watchFetchData() {
  yield takeEvery('FETCH_REQUESTED', fetchData);
}

redux-saga 사용 방법

1. redux-saga 미들웨어 등록

먼저, redux-saga 미들웨어를 등록해야 합니다. 이를 위해서는 createSagaMiddleware 함수를 이용하여 saga 미들웨어를 생성하고, applyMiddleware를 사용하여 미들웨어를 스토어에 적용합니다.

import createSagaMiddleware from 'redux-saga';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));

sagaMiddleware.run(rootSaga);

2. saga 생성

리덕스 액션을 모니터링하고, 필요에 따라 비동기 작업을 수행하기 위한 saga를 생성합니다.

// sagas.js
import { takeEvery, put } from 'redux-saga/effects';

function* fetchData() {
  // 비동기 작업을 수행하는 코드
  yield put({ type: 'FETCH_SUCCESS', data });
}

function* watchFetchData() {
  yield takeEvery('FETCH_REQUESTED', fetchData);
}

export default function* rootSaga() {
  yield all([
    watchFetchData(),
    // 다른 saga들을 추가할 수 있음
  ]);
}

3. 액션 디스패치

비동기 작업을 수행하기 위한 액션을 디스패치합니다.

dispatch({ type: 'FETCH_REQUESTED' });

결론

redux-saga를 사용하면 리덕스 애플리케이션에서 비동기 작업을 관리하는 것이 더욱 효율적이고 예측 가능해집니다. 제너레이터 함수 기반의 접근 방식은 코드를 더 읽기 쉽게 만들고, 애플리케이션의 사이드 이펙트를 쉽게 다룰 수 있도록 도와줍니다.

위의 내용을 참고하여, redux-saga를 사용하여 리덕스 애플리케이션에서 비동기 작업을 보다 쉽게 관리해 보세요!

참고 자료: