React -Redux saga (takeEvery함수와 take)

React -Redux saga (takeEvery함수와 take)

|시작하기에 앞서

redux-saga는 몇몇 특정 액션들이 스토어에 보내질 때, 여러 task들을 함께 실행하기 위한 내부적인 함수를 감싸는 몇몇 helper effect들을 제공합니다. 그 중, redux-thunk와 비슷한 takeEvery 함수가 있는데, 가장 흔히 사용되는 함수입니다. takeEvery는 동시에 시작되는 여러 개의 fetchData instance들을 허용합니다. 이 순간에 이전의 하나 혹은 더 많은 아직 제거되지 않은 fetchData 작업들이 아직 있는 동안 새로운 fetchData 작업을 시작합니다. 

https://mskims.github.io/redux-saga-in-korean/advanced/FutureActions.html  참고 

> take 와 takeEvery를 한눈에 비교하는 예제

import { select, takeEvery } from 'redux-saga/effects'

function* watchAndLog() {
  yield takeEvery('*', function* logger(action) {
    const state = yield select()

    console.log('action', action)
    console.log('state after', state)
  })
}

이제, 위와 같은 플로우를 이행하기 위해 어떻게 take 이펙트를 사용하는지 봅시다.

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

function* watchAndLog() {
  while (true) {
    const action = yield take('*')
    const state = yield select()

    console.log('action', action)
    console.log('state after', state)
  }
}

https://mskims.github.io/redux-saga-in-korean/advanced/FutureActions.html 참고 중요한 부분 발췌

• take는 우리가 전에 봤던 call, put와 비슷합니다. 이는 특정한 액션을 기다리기 위해서 미들웨어에 알려주는 명령 오브젝트를 생성합니다. 

• take를 사용하는 것은 우리의 코드 작성법에 작은 충격을 줍니다. takeEvery의 경우에, 실행된 태스크는 그들이 다시 실행될 때에 대한 관리 방법이 없습니다. 그저 각각의 매칭되는 액션에 실행되고, 또 실행되겠죠. 또한 그들은 언제 감시(observing)를 멈춰야 하는지에 대한 관리 방법도 없습니다.

• take의 경우에는 컨트롤의 방향이 정반대입니다. 핸들러 태스크에 푸시(push)되고 있는 액션들 대신, 사가는 스스로 액션들을 풀링(pulling)합니다. 이는 사가가 일반 함수 콜을 하는 것처럼 보입니다. 액션이 dispatch되었을 때 resolve하는 action = getNextAction()처럼요.

• 풀 접근법의 다른 이점은 우리가 친숙한 동기적(synchronous) 스타일로 컨트롤 플로우를 표현할 수 있다는 것입니다. 예를 들어, 우리가 LOGIN 액션과 LOGOUT 액션을 이용하여 로그인 플로우를 실행시키고 싶다고 가정해봅시다. takeEvery(혹은 redux-thunk)을 이용했다면 LOGIN과 LOGOUT으로 나뉘어진 두 개의 태스크(혹은 썽크)를 작성해야 했을 것입니다.

풀 모델을 사용하면 우리는 같은 액션을 반복해서 핸들링하지 않고 같은 곳에 우리의 플로우를 작성할 수 있습니다.

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







|느낀점

takeEvery는 비동기적으로 지속적으로 액션의 영향을 받는 작업에 쓰이고, take는 특정 기능구현이나, 동기적인 작업(?)에 쓰이는 경향이 강한것 같다.