이펙트

이펙트는 이벤트를 처리할 내용을 담고 있다. Redux-Saga에서는 이러한 이펙트 들을 yield를 이용하여 호출하고 수행된 내용을 다시 돌려 받아 그 다음 액션들을 수행한다.

이펙트 함수 종류
call: 함수를 동기적으로 실행
all: 매개변수 배열 안에 있는 함수들을 병렬적으로 실행
fork: 함수를 비동기적으로 실행
takeLatest: 짧은 시간내에 액션이 관측되면 액션이 들어온 맨 마지막 것만 실행
delay: 매개변수에 있는 시간 만큼 잠깐 멈춤
put: dispatch() 와 동일

설치

npm i redux-saga

Counting App 실습

먼저 이전 글의 실습 코드를 사용한다.

createSagaMiddleware 함수를 이용해 sagaMiddleware를 만들고

sagaMiddleware.run 안에 실행시킬 rootSaga를 넣는다.

rootSaga는 제너레이터 함수를 통해 만들고
all 안에 실행시킬 제너레이터 함수들을 넣는다.

2개의 generator 함수를 생성을 하였다.

watchIncrement 함수에서는 takeLatest 안에 inCrease 액션 함수를 인자로 넣고 incrementSaga를 다음 인자로 넣어준다.

그럼 inCrease 액션이 dispatch 되는 순간 saga에서 그 액션을 take 한 후, incrementSaga generator 함수를 실행 시킨다.

incrementSaga 제너레이터 함수를 살펴보면

call(inCrease) => inCrease 액션을 실행시킨다.
delay(1000) => 1초 대기

비동기 통신처럼 보이기 위해 delay를 사용을 하였다.

여기서 inCrease 는 action creator 함수이다.
따라서 call(inCrease)를 할 경우 action creator 함수를 실행시키게 된다.

1초 후에 put(inCreaseSuccess())를 실행시킨다.
inCreaseSuccess() => {type: 'counter/inCrease', payload: undefined} 와 같다.

따라서 put은 이 액션 타입을 디스패치 한다.

watchIncrement 함수에서
takeLatest(inCrease, incrementSaga) 가 의미하는 것은
들어오는 모든 inCrease 중 가장 마지막 액션에 대해 incrementSaga를 실행한다는 뜻이다.

보통 takeLatest의 첫번째 인자는 액션의 타입을 적어주면 되는데
redux-toolkit 에서 inCrease를 써주면 액션의 타입이 된다.
inCrease() 이렇게 실행 시키면 action creator 함수를 실행하게 되고 {type:, paylod:} 이런 결과물이 나온다.