제너레이터의 개념을 가져와서 사용하게 되는 Redux-Saga
function* watchFetchProducts() {
yield takeEvery("PRODUCTS_REQUESTED", fetchProducts)
}
import { all, fork, put, call, takeLatest } from "redux-saga/effects";
// 아래와 같이 api 결과를 핸들링하여 dispatch 가능
// 즉 액션을 발동시켜서 reducer가 실행된다는 이야기이다.
yield put({ type: GET_USER_TICKET_SUCCESS, data: result.data });
delay
. 설정된 시간 이후에 resolve를 하는 Promise 객체를 리턴한다.all
은 배열을 받고, 받은 이펙트를 등록 (실행 아님, 등록임!!)fork
는 함수를 실행call
은 동기함수호출 (api가 리턴할때까지 기다림), fork
은 비동기함수 호출 (안기다리고 리턴 다음꺼 이동)call
(yield가 await과 비슷)put
은 특정 액션을 dispatch하도록 한다.select
은 특정 state를 가져오도록 한다.예시:
put({type: 'INCREMENT]})
→INCREAMENT action을 dispatch한다.
take
→ 한번만 실행되고 이벤트 삭제됨takeEvery
→ ‘INCREASE_ASYNC’ action이 들어오면 increaseSaga 함수를 호출시켜준다.예시:
takeEvery(INCREASE_ASYNC, increaseSaga)
→들어오는 모든 INCREASE_ASYNC액션에 대해 increaseSaga 함수 실행
takeLatest
→ 클릭 실수로 2번 했을때, 앞 이벤트 무시 마지막 이벤트 실행(보통 이거 많이씀)action 및 reducer 설정
rootSaga에 Saga import
export default function* rootSaga() {
yield all([ ...tempSaga])
}
// 서비스 권한 조회
export function* tempfunction() {
try {
const response = yield call(Api.tempApi);
if (response.resultCode === 200) {
}
}catch (error) {
console.error(error);
} finally {
}
}
// Action이랑 Saga 연결
export default [
takeLatest(temptypes.GET_TEMP_REQUEST, tempSaga.tempfunction),
];
// store값 지정
const check = (state) => state.store.check;
export function* test(action) {
// 값 직접 사용
const checkItem = yield select(check);
}
export function* test(action) {
try {
//call로 api 호출
const response = yield call(Api.url, action.payload);
if (response.resultCode === 200) {
//put으로 store값 수정
yield put({type: type.success, payload: data});
}
}catch (error) {
console.error(error);
} finally {
}
}
export default [
takeLatest(type.request, saga.name),
];