[javascript] Redux와 비동기 주체의 연동 방법은?

22 Nov 2023

javascript

Redux는 JavaScript 애플리케이션에서 상태 관리를 위한 도구로 많이 사용됩니다. Redux를 비동기 작업과 함께 사용해야 하는 경우, Redux-Saga나 Redux-Thunk와 같은 미들웨어를 사용하여 비동기 작업을 처리할 수 있습니다.

Redux-Saga: Redux-Saga는 Redux 애플리케이션에서 비동기 작업을 관리하기 위한 라이브러리입니다. Saga는 Generator 함수로 작성되며, 애플리케이션의 상태 변화에 따라 비동기 작업을 수행할 수 있습니다. Saga에서는 특정 액션에 대한 처리 로직을 작성하고, 필요한 API 호출이나 다른 비동기 작업을 처리할 수 있습니다.

// 예시 Redux-Saga 코드

import { takeEvery, call, put } from 'redux-saga/effects';
import { FETCH_DATA, fetchDataSuccess, fetchDataFailure } from '../actions';

function* fetchData() {
  try {
    const response = yield call(api.fetchData); // API 호출
    yield put(fetchDataSuccess(response.data)); // 데이터 fetch 성공
  } catch (error) {
    yield put(fetchDataFailure(error)); // 데이터 fetch 실패
  }
}

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

export default function* rootSaga() {
  yield all([
    watchFetchData()
  ]);
}

Redux-Thunk: Redux-Thunk는 Redux 애플리케이션에서 비동기 작업을 관리하기 위한 미들웨어로, 함수 형태의 액션을 dispatch하는 것을 허용합니다. Thunk 함수는 액션을 dispatch하기 전에 특정 조건을 확인하거나 비동기 작업을 수행할 수 있습니다.

// 예시 Redux-Thunk 코드

import { fetchDataSuccess, fetchDataFailure } from '../actions';

export const fetchData = () => {
  return dispatch => {
    dispatch({ type: FETCH_DATA });

    api.fetchData()
      .then(response => {
        dispatch(fetchDataSuccess(response.data)); // 데이터 fetch 성공
      })
      .catch(error => {
        dispatch(fetchDataFailure(error)); // 데이터 fetch 실패
      });
  };
};

Redux-Saga와 Redux-Thunk는 각각 장단점을 가지고 있으며, 선택은 개발 환경과 요구사항에 따라 다를 수 있습니다. Redux-Saga는 액션을 감시하고 제너레이터 함수를 사용하여 더 복잡한 비동기 흐름을 관리할 수 있지만, 러닝 커브가 높을 수 있습니다. Redux-Thunk는 간단하고 직관적인 구현이 가능하지만, 비동기 흐름이 단순할 경우에 더 적합합니다.

어떤 방식을 선택하든, Redux와 함께 비동기 작업을 처리하는 것은 애플리케이션의 성능과 유지 보수에 중요한 역할을 합니다. 비동기 작업을 효율적이고 안정적으로 관리하며, Redux의 상태 관리와 결합하여 전체적인 애플리케이션 개발을 진행할 수 있도록 고려해야 합니다.