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