아래와 같은 비동기 로직이 있다고 할 경우, redux-thunk로 표현하면 아래와 같은 모양일 것이다.


function findPolicy({ paylaod }) {
    const { id } = payload;
  
    return (dispatch) => {
        return new Promise((resolve) => {
            if (_.isNumber(id)) {
                return api.findById(id)
                    .then(resolve);
            } else {
                return api.findLatest(id)
                    .then(resolve);
            }
        }).then((policy) => {
            if (policy !== null) {
                dispatch({
                    type: action.REQUEST_POLICY_SUCCESS,
                    payload: {
                        policy
                    }
              });
            } else {
                dispatch({
                    type: action.REQUEST_POLICY_FAIL
                });
            }
        });
    });
}

반면 redux-saga를 이용하면 아래와 같이 표현할 수 있다.

// saga에서는 task라는 개념이 있고, generator 문법을 통해 표현
function* findPolicyTask({ payload }) {
  const { id } = response;
  
  let response = null;
  if (_.isNumber(id)) {
      response = yield call(api.findById, id);
  } else {
      response = yield call(api.findLatest);
  }
  
  if (response !== null) {
      const { policy } = response;
      // put을 통해 store에 action을 쏴줄 수 있음
      yield put({
          type: action.REQUEST_POLICY_SUCCESS,
          payload: {
              policy
          }
      });
  } else {
      yield put({
          type: action.REQUEST_POLICY_FAIL
      });
  }  
}

확실히 콜백이 없어지니 보기가 편하다.