로토의 블로그

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 }); }
}

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