간단하게 Redux Saga 사용하기

• redux saga는 redux의 미들웨어로 비동기 액션을 처리하기 위해서 사용하는 라이브러리이다.
• redux thunk에 비해서 더 많은 기능을 제공하기에 애용되는 라이브러리이다.
• 다소 설정이 복잡하지만, 반복되는 패턴이 많고 많은 기능을 제공한다.

스토어에 미들웨어 연결하기

...
import {legacy_createStore as createStore, compose, applyMiddleware} from "redux";
import createSagaMiddleware from "@redux-saga/core";
import reducer from "../reducers";
import rootSaga from "../sagas";

const sagaMiddleware = createSagaMiddleware();
const enhancer = compose(applyMiddleware(...middlewares));
      
const store = createStore(reducer, enhancer);
store.sagaTask = sagaMiddleware.run(rootSaga);

export default store;

 

• 사가 미들웨어를 만들고 연결해준다.
• 그리고 root 사가를 연결한 뒤에 사가를 실행한다.

rootSaga 작성하기

import axios from "axios";
import { all, call, fork, put, takeEvery } from "redux-saga/effects";

function postLogin(data) {
  return axios.post("로그인 api 주소", data);
}

function logoutAPI() {
  return axios.post("로그아웃 API 주소");
}

// API 호출 함수는 제너레이터 함수가 아니다.

function* logIn(action) {
  try {
    const res = yield call(postLogin, action.data); // 두 번째 인자부터 함수의 인자(postLogin)가 된다.
    yield put({
      type: "LOGIN_SUCCESS",
      data: res.data,
    });
  } catch (err) {
    yield put({
      type: "LOGIN_FAILURE",
      data: err,
    });
  }
}

function* logout() {
  try {
    const result = yield call(logoutAPI);
    yield put({
      type: "LOGOUT_SUCCESS",
      data: result.data,
    });
  } catch (err) {
    yield put({
      type: "LOGOUT_FAILURE",
      data: err,
    });
  }
}

function* watchLogIn() {
  yield takeEvery("LOG_IN_REQUEST", logIn);
}

function* watchLogOut() {
  yield takeEvery("LOG_OUT_REQUEST", logout);
}

export default function* rootSaga() {
  yield all([fork(watchLogIn), fork(watchLogOut)]);
}

take

• take는 첫 번째 인자로 받는 액션 타입이 올 때까지 기다린다.
• 기본 take는 단 한번, 해당 액션에 대해서 두 번째 인자인 함수를 실행한다는 의미이다.
• takeEvery는 해당 타입에 대한 액션을 언제나 받는다는 의미이다.
• takeLastest는 연속적으로 여러개의 해당 액션이 들어왔을 때, 가장 마지막의 것 하나만 처리한다는 의미이다.
• takeLeading는 takeLastest와는 반대로 여러번의 액션이 왔을 때, 가장 첫 번째 것을 실행한다.

fork, call

• fork나 call을 통해서 제너레이터 함수를 실행할 수 있다.
• call은 동기 함수를 호출해야할 때 사용하고, 일반적인 자바스크립트 비동기 함수를 호출할 때는 fork를 사용한다.

all

• all은 배열을 인자로 받는데, 배열 내부의 모든 fork나 call을 실행한다.

put

• put은 dispatch와 유사하게 작동한다.
• 인자로 액션 객체를 받는다.

Redux saga의 작동

리덕스 사가를 구성할 때, 요청과 성공 혹은 실패 3개의 액션을 형성한다.

요청 액션이 컴포넌트에서 dispatch 되면, 사가에서 이 액션에 반응하여 제너레이터 함수가 실행된다.

API 호출 등 비동기 요청이 오가고 만약 성공하면 성공 액션 객체를 put, 실패시 실패 액션 객체를 put 메서드에 넣어 실행한다.

put이 실행되면, reducer가 실행되는데, 해당 성공 혹은 실패 액션 객체에 따라 switch문이 실행되고 redux 전역 상태가 갱신된다.

 

🍉 reducer함수가 saga보다 더 먼저 실행된다.

🍉 사가는 제너레이터 함수를 사용하고, 때문에 yield 키워드를 사용한다.

🍉 yield 키워드를 기준으로 함수가 중단되기에, 리덕스 사가는 테스트를 하는데 장점이 있다.

 

https://redux-saga.js.org/

Redux-Saga - An intuitive Redux side effect manager. | Redux-Saga