takeEvery, takeLatest, takeLeading

redux-saga api 호출

redux-saga는 제너레이터 함수를 통해 yield로 api 호출 가능

이벤트 리스너 같이 호출시마다 실행하도록 할 수 있음 👇

 

1️⃣ while(true){...}

동기적으로 동작

function* watchLogOut() {
    while(true) {
        yield take('LOG_OUT_REQUEST', logOut);
    }
}

직관적이지 않고, 코드상으로도 좋지 않아서 잘 안쓰임

2️⃣ takeEvery, takeLatest, takeLeading 비동기로 동작(while문 대체 가능)

function* watchLogOut() {
    yield takeEvery('LOG_OUT_REQUEST', logOut);
}

 

---

takeEvery, takeLatest, takeLeading

redux-saga API는 편의성을 위해서 여러 Effect Creator들을 제공함

그 중 액션을 감지하기 위한 목적으로 자주 사용하는 헬퍼인 takeEvery, takeLatest, takeLeading가 있음

 

 

takeEvery

모든 클릭이 실행됨

 

takeLatest

실수로 여러번 클릭한 경우 앞에 클릭은 무시되고 마지막 클릭만 실행(제일 많이 사용함)
응답을 취소함(요청 취소는 아님)

2개를 요청한 경우 2개의 데이터가 저장되기에 게시글 추가인 경우 새로고침시에 똑같은 글 2개가 뜰것임
💡 이를 해결해기 위해 throttle을 사용

 

takeLeading

첫번째 클릭만 실행

 

---

throttle

마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 함

 

debounce

연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출