[Redux-saga] pulling future actions

1. action pulling이란?

action pulling을 해석하면 action을 잡아당기는 것을 의미한다. saga에서의 action pulling은 take Effect를 의미한다.
그렇다면 take Effect는 무엇일까?

2. take effect 란?

take는 이전 글에서 설명한 call Effect와 비슷한 점이 있다. call 이팩트는 Promise가 resolved 될 때까지 generator은 중지하도록 미들웨어에 지시한다. take도 마찬가지로 일치하는 액션이 dispatch 될 때까지 중지되도록 미들웨어에게 명령하는 것이다.
takeEvery Helper 함수 같은 경우, 호출된 Task에 대해 호출 시기를 제어할 수 없고, 일치하는 각 작업에서 반복해서 호출된다고 한다. 왜 그럴까? takeEvery는 내부적으로 여러 Effect가 조합되어 생성된 함수이기 때문에 외부에서 Task의 호출 시기나, take Effect를 중지시킨다거나 상세한 조작을 할 수 없다.
take Effect의 경우는 다르다. take로 인해 saga가 자체적으로 action을 pulling 한다. 따라서 제어 흐름을 구현할 수 있다.
예제를 살펴보자.

import { take, put } from 'redux-saga/effects'

function* watchFirstThreeTodosCreation() {
  for (let i = 0; i < 3; i++) {
    const action = yield take('TODO_CREATED')
  }
  yield put({type: 'SHOW_CONGRATULATION'})
}

첫번째 TODO_CREATED액션에 대해 대기상태이고, TODO_CREATED액션이 dispatch 되면 loop를 통해 다음 effect인 take가 실행된다. 또다시 TODO_CREATED액션이 dispatch 되면 loop를 통해 다음 effect인 take가 실행된다. 그다음 put 이팩트가 실행되어 SHOW_CONGRATULATION 액션이 dispatch 된다. 그리고 take는 더 이상 action dispatch를 기다리지 않는다.

3. take effect의 장점

동기적인 스타일로 제어할 수 있다. 예를 들어 LOGIN 및 LOGOUT의 두 가지 작업으로 로그인과 로그아웃을 한다고 가정해보자. takeEvery를 사용한다면 LOGIN, LOOUT의 saga를 생성해야 한다. 코드가 분산되어 모두를 읽고 해석해야 하고, 순서를 머릿속으로 생각해야 하는 번거로움이 생긴다. 하지만 pulling model를 사용하면 동일한 위치 작성할 수 있다.

function* loginFlow() {
  while (true) {
    yield take('LOGIN')
    // ... perform the login logic
    yield take('LOGOUT')
    // ... perform the logout logic
  }
}

한눈에 잘 들어온다. LOGIN 액션이 dispatch 한다면 //... perform the login logic 코드가 실행되고 take effect는 'LOGOUT'액션을 기다리고 LOGOUT 액션이 dispatch 한다면 //... perform the logout logic 이 코드가 실행되고 다시 LOGIN 액션을 기다린다.
이러한 구조는 명확하게 작업순서를 알 수 있다.