새 프로젝트에서 redux-saga를 써보려고하는데 헷갈려서 주로 쓰는 함수를 정리해보았다.
읽어주세요 · 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함수를 사용해서 이렇게 쓸 수도 있다.
call과 put의 다른 점은 put은 스토어에 인자로 들어온 action을 dispatch하고, call인 경우에는 주어진 함수를 실행하게 되는 것이다.
all
all함수를 사용해서 제너레이터 함수를 배열의 형태로 인자로 넣어주면, 제너레이터 함수들이 병행적으로 동시에 실행되고, 전부 resolve될때까지 기다린다. Promise.all과 비슷하다고 보면된다.
예시: yield all([testSaga1(), testSaga2()])
→ testSaga1()과 testSaga2()가 동시에 실행되고, 모두 resolve될 때까지 기다린다.
'React' 카테고리의 다른 글
| React Router로 렌더링하는 컴포넌트에 prop 전달하기 (1) | 2020.03.03 |
|---|---|
| create-react-app 없이 react project만들기 (2) | 2020.02.26 |
| React life cycle method 생각의 흐름대로 정리하기 (0) | 2019.10.24 |
| 리액트 이벤트 핸들러 네이밍 (0) | 2019.10.16 |
| 모든 컴포넌트에 React.memo를 사용해도 되나요? (0) | 2019.09.29 |