본문 바로가기

React

redux-saga의 주요함수(delay, call, put, all, takeEvery, takeLatest)

새 프로젝트에서 redux-saga를 써보려고하는데 헷갈려서 주로 쓰는 함수를 정리해보았다.

redux-saga docs 링크(한글번역)

 

읽어주세요 · GitBook

No results matching ""

mskims.github.io

 

delay

설정된 시간 이후에 resolve하는 Promise객체를 리턴한다.
예시: delay(1000)
→ 1초 기다리기

 

put

특정 액션을 dispatch하도록 한다.
예시: put({type: 'INCREMENT]})
→INCREAMENT action을 dispatch한다.

 

takeEvery

들어오는 모든 액션에 대해 특정 작업을 처리해 준다.
예시: takeEvery(INCREASE_ASYNC, increaseSaga)
→들어오는 모든 INCREASE_ASYNC액션에 대해 increaseSaga 함수 실행

 

takeLatest

기존에 진행 중이던 작업이 있다면 취소 처리하고 가장 마지막으로 실행된 작업만 수행한다.
예시: takeLatest(DECREASE_ASYNC, decreaseSaga)
→DECREASE_ASYNC액션에 대해서 기존에 진행 중이던 작업이 있다면 취소 처리하고 가장 마지막으로 실행된 작업에 대해서만 decreaseSaga함수를 실행한다.

 

call

함수의 첫 번째 파라미터는 함수, 나머지 파라미터는 해당 함수에 넣을 인수이다.
예시: call(delay, 1000)
→delay(1000)함수를 call함수를 사용해서 이렇게 쓸 수도 있다.

callput의 다른 점은 put은 스토어에 인자로 들어온 action을 dispatch하고, call인 경우에는 주어진 함수를 실행하게 되는 것이다.

 

all

all함수를 사용해서 제너레이터 함수를 배열의 형태로 인자로 넣어주면, 제너레이터 함수들이 병행적으로 동시에 실행되고, 전부 resolve될때까지 기다린다. Promise.all과 비슷하다고 보면된다.
예시: yield all([testSaga1(), testSaga2()])
→ testSaga1()과 testSaga2()가 동시에 실행되고, 모두 resolve될 때까지 기다린다.