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 }); }
}
확실히 콜백이 없어지니 보기가 편하다.