redux-saga를 쓰니 좋은 점

아래와 같은 비동기 로직이 있다고 할 경우, 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
});
}

}

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