Redux-Saga effects(이팩트) 정리

delay

설정된 시간 이후에 resolve하는 Promise객체를 반환한다.

put

특정 액션을 dispatch하도록 한다.

take

1회만 실행하고 이벤트 삭제

 

takeEvery

들어오는 모든 액션에 대해 특정 작업을 1번만 처리해 준다. 이벤트 계속 유지

 

takeLatest

기존에 진행 중이던 작업이 있다면 취소 처리하고 가장 마지막으로 실행된 작업만 수행한다.

또는 동시에 들어오는 여러 요청들 중 마지막에 호출된 작업만 수행한다.

클릭을 연달아 3번 했을때 앞에 두번의 이벤트는 무시하고 마지막 이벤트만 실행한다. 

이미 완료된 경우에는 실행하지만 세번 클릭 중 앞의 두번의 클릭이 pending 상태인 경우 마지막 요청만 실행한다.

* 프론트 단에서 연달아 2번 클릭하여 요청을 2번 보내게 되면 백엔드 단에서 response는 한번 보내지만 백엔드 단에는 2번 요청이 갔으므로 정보가 2개(중복) 저장될 수 있다.

* 두번째 인자로 들어온 콜백함수는 제너레이터 함수가 아닌 일반 함수로 작성해야 한다!!

throttle

일정시간이 지날때까지 추가적인 요청을 수행하지 않는다.

함수가 호출된 후 지정해둔 시간동안 함수를 호출하더라도 실행하지 않는다.

takeLatest의 문제점을 해결 가능.

debounce

동일한 함수가 연속해서 호출될 때 첫번째 또는 마지막 호출만 실행하는 기능

* debounce와 throttle의 차이점

throttle은 지정한 시간마다 정기적으로 기능 실행을 보장한다.

반면에 debounce는 수많은 이벤트가 발생해도 모두 무시하고 특정 시간 사이에 어떤 이벤트도 발생하지 않은 경우에만 딱 한번만 마지막 이벤트를 발생시키는 기법이다. 

그러므로 지정한 ms(초)가 지나기 전에 계속 이벤트가 발생할 경우 콜백에 반응하는 이벤트는 발생하지 않고 계속 무시된다.

call

동기 함수 호출(api 호출 후 return까지 대기), fork는 비동기 함수 호출(기다리지 않고 return 다음으로 이동)

* api 통신할때는 무조건 call을 사용하도록 한다. yield call 과 같이 둘이 함께 많이 사용되는데 yield가 await과 같은 역할을 한다. 

함수의 첫 번째 파라미터는 함수, 나머지 파라미터는 해당 함수에 넣을 인수이다.

ex) call(delay, 1000)

=> delay(1000)함수를 call함수를 사용해서 이렇게 쓸 수도 있다. 즉 첫번째 함수의 인자값으로 두번째 인자의 값이 들어간다.

yield와 함께 사용하는 경우

제너레이터 함수에서 yield call 을 사용하면 await과 같은 효과를 볼 수 있다. 

제너레이터 함수에서 yield fork를 사용하면 await 없이 promise를 호출하는것과 같다.

 

all

all은 배열을 받으며 받은 effect를 등록한다.(실행 X 등록 O).

all 함수를 사용해서 제너레이터 함수를 배열의 형태로 인자로 넣어주면, 제너레이터 함수들이 동시에 실행되고, 전부 resolve 될 때까지 기다린다. Promise.all과 비슷하다고 보면된다.

ex) yield all([ fork(testSaga1()), fork(testSaga2()) ])

=> testSaga1()과 testSaga2()가 동시에 실행되고, 모두 resolve될 때까지 기다린다.

fork

fork는 함수를 실행한다.

ex) yield all([ fork(testSaga1()), fork(testSaga2()) ])

=> testSaga1() 와 testSaga2() 함수를 실행한다.

yield와 함께 사용하는 경우

제너레이터 함수에서 yield call 을 사용하면 await과 같은 효과를 볼 수 있다. 

제너레이터 함수에서 yield fork를 사용하면 await 없이 promise를 호출하는것과 같다.