Redux - redux saga

redux saga란

• Redux 미들웨어(Middleware)의 일종으로, 비동기 작업을 처리하기 위한 라이브러리이다. Redux Thunk와 마찬가지로 Redux 액션 객체 내에서 비동기 작업을 처리할 수 있다.
• 제너레이터(generator)를 이용하여 비동기 작업을 처리하기 때문에, 비동기 작업의 흐름을 더욱 명확하게 제어할 수 있다. Redux Saga는 Redux 액션 객체에 대응하는 제너레이터 함수를 만들어서, 이를 통해 비동기 작업을 처리한다.
• Redux의 createStore 메서드를 호출할 때 applyMiddleware 메서드를 이용하여 등록할 수 있으며, 이를 통해 Redux 미들웨어 체인(Middleware chain)에 추가된다. Redux Saga에서는 액션 객체에 대응하는 제너레이터 함수 내에서 Redux 디스패치(dispatch) 메서드와 getState 메서드를 호출할 수 있다.
• Redux Thunk와 달리, 복잡한 비동기 작업을 더욱 쉽게 처리할 수 있으며, 더욱 효율적인 비동기 작업 관리를 가능하게 한다.

예시

import { takeLatest, call, put } from 'redux-saga/effects';
import axios from 'axios';

// API 호출하는 함수
function* fetchUser(action) {
  try {
    // API 호출 시작을 나타내는 액션 객체를 디스패치.
    yield put({ type: "FETCH_USER_REQUEST" });

    // API 호출을 비동기적으로 처리한다.
    const response = yield call(axios.get, `https://api.example.com/users/${action.payload.userId}`);

    // API 호출 성공을 나타내는 액션 객체를 디스패치.
    yield put({ type: "FETCH_USER_SUCCESS", payload: response.data });
  } catch (error) {
    // API 호출 실패를 나타내는 액션 객체를 디스패치.
    yield put({ type: "FETCH_USER_FAILURE", error });
  }
}

// Redux Saga를 등록하는 함수
function* rootSaga() {
  yield takeLatest("FETCH_USER", fetchUser);
}

export default rootSaga;