Redux-thunk와 Redux-saga 비교

Redux-thunk와 Redux-saga

Redux-thunk와 Redux-saga는 둘 다 Redux의 미들웨어 라이브러리임

Redux 미들웨어는 dispatch()메소드를 통해 store로 가는 액션을 가로채는 코드

 

---

Redux-Thunk

표준 액션들을 디스패치하는 것 외에도 Redux-Thunk 미들웨어를 사용하면 thunks라고 불리는 특별한 함수를 디스패치할 수 있음

 

Thunks(in Redux)는 일반적으로 다음 구조를 가짐 👇

export const thunkName = parameters => (dispatch, getState) => {
  // 당신의 어플리케이션 로직을 여기에 적으세요
};

thunk는 (선택적으로) 일부 parameters를 인수로 취하고 또 다른 함수를 return하는 함수임

내부 함수는 dispatch 함수와 getState함수를 사용하며 두 함수 모두 Redux-Thunk 미들웨어에서 제공함

 

사용자의 이름과 비밀번호를 사용하는 login API를 호출하는 thunk 예제 👇

1️⃣ thunk는 시작을 나타내는 request를 가리키는 액션을 디스패치함

2️⃣ thunk는 call을 생성

3️⃣ API call이 성공 여부에 따라 success 액션 혹은 failure 액션을 전달함

import * as api from 'api';
import {loginRequest, loginSuccess, loginFailure} from "./loginActions';

export const loginThunk =
  (name: string, password: string)=>
    (dispatch: Function)=>{
        dispatch(loginRequest());
        try{
          api.login(name, passwrod);
        }
        catch(err){
          dispatch(loginFailure(err));
          return;
        }
        dispatch(loginSuccess();)
    };

thunk를 디스패치 할 때, 예를 들어 Redux-Thunk는 dispatch(loginThunk('admin', 'secret')); 같은 내부 함수를 호출함

(dispatch: Function) => {
  dispatch(loginRequest());
  try {
    api.login("admin", "secret");
  } catch (err) {
    dispatch(loginFailure(err));
    return;
  }
  dispatch(loginsuccess());
};

 

---

Redux-Saga

Redux-Saga 미들웨어를 사용하면 복잡한 애플리케이션 로직을 sagas라는 순수 함수 로 표현할 수 있음

순수 함수는 예측 가능하고 반복 가능하기 때문에 테스트 관점에서 바람직하며 상대적으로 테스트하기 쉬움

Sagas는 generator라고 불리는 특별한 함수를 통해 구현됨

ES6의 새로운 기능인 generator함수는 기본적으로, yield문이 있는 모든 곳에서 generator 안팎으로 이동함

💡 이 문법의 핵심 기능은 함수를 작성 할 때 함수를 특정 구간에 멈춰놓을 수도 있고, 원할 때 다시 돌아가게 할 수도 있음
💡 그리고 결과값을 여러번 반환 할 수도 있음

 

generator 함수 👇

function 키워드 뒤에 별표가 붙음

function* rootSaga() {
  //...
}

 

redux-thunk로 작성했던 login기능을 redux-saga로 다시 작성한 예제 👇

import * as api from "api";
import { LoginRequestAction, loginSuccess, loginFailure } from "./loginActions";

function* loginSaga() {
  const action: LoginRequestAction = yield take("LOGIN_REQUEST");
  const { name, password } = aciton.payload;
  try {
    yield call(api.login, name, password);
  } catch (err) {
    yield put(loginFailure(err));
    return;
  }
  yield put(loginSuccess());
}

loginSaga가 Redux-Saga에 등록되면 즉시 실행 됨

그러나 첫번째 줄 yield take의 'LOGIN_REQUEST'가 store에 디스패치 될 때까지 일시 중지됨

이 작업이 완료되면 실행이 계속됨

 

---

가장 큰 차이점

Thunks는 action에 응답을 줄 수 없음

반면 Redux-Saga는 스토어를 구독하고 특정 액션이 전달 될 때 saga를 실행하거나 계속할 수 있음

 

 

---

참고 자료 👇

decembersoft.com/posts/redux-thunk-vs-redux-saga/

Redux-Thunk vs. Redux-Saga