[리덕스 사가 공식문서 번역] takeEvery이펙트와 takeLast 이펙트의 차이

https://redux-saga.js.org/docs/basics/UsingSagaHelpers

Using Saga Helpers | Redux-Saga

본 글은 리덕스 사가 공식문서를 번역한 글입니다.(*주의 : 필자의 의역이 섞여있습니다. )

---

 

redux-saga provides some helper effects wrapping internal functions to spawn tasks when some specific actions are dispatched to the Store.

The helper functions are built on top of the lower level API. In the advanced section, we'll see how those functions can be implemented.

The first function, takeEvery is the most familiar and provides a behavior similar to redux-thunk.

 

Let's illustrate with the common AJAX example.

On each click on a Fetch button we dispatch a FETCH_REQUESTED action.

We want to handle this action by launching a task that will fetch some data from the server.

First we create the task that will perform the asynchronous action:

redux-saga는 일부 특정 동작들이 스토어에 디스패치될 때 작업을 생성하기 위해 내부 함수를 감싸는 일부 도우미 효과를 제공한다.

그 도우미 함수들은 가장 낮은 단계의 api 위에 만들어진다. 그것들이 어떻게 수행되는지에 대해서는 고급섹션에서 살펴 볼 예정이다.  

 

자, 도우미 함수의 첫번째인 takeEvery함수이다.

이것은 우리에게 가장 친숙한 redux-thunk에서 제공하는 것과 같은 행동를 제공한다. 

 

일반적인 ajax예제를 가지고 설명해보겠다. 

매번 fetch버튼을 클릭할 때마다, 우리는 FETCH_REQUESTED 액션을 디스패치한다. 

우리는  이 액션을 시작함으로써  몇몇 데이터를 서버로부터 받아오는 작업을 다루기 원한다.

먼저, 비동기액션을 실행하게 만들어 보자. 

import { call, put } from 'redux-saga/effects'
import Api from './path/to/api'

export function* fetchData(action) {

try {
const data = yield call(Api.fetchUser, action.payload.url)
yield put({ type: 'FETCH_SUCCEEDED', data })
} catch (error) {
yield put({ type: 'FETCH_FAILED', error })
}
}

 

 

To launch the above task on each FETCH_REQUESTED action:

위의 작업을 FETCH_REQUESTED액션이 일어날때마다 실행하고 싶다면 아래와 같이 사용하면 된다. 

 

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

function* watchFetchData() {
yield takeEvery('FETCH_REQUESTED', fetchData)
}

 

In the above example, takeEvery allows multiple fetchData instances to be started concurrently.

At a given moment, we can start a new fetchData task while there are still one or more previous fetchData tasks which have not yet terminated.

If we want to only get the response of the latest request fired

(e.g. to always display the latest version of data)

we can use the takeLatest helper:

위의 예제를 보면, takeEvery는 다수의 fetchData 인스턴스를 동시에 실행할 수 있게 해준다. 

이전에 fecthData작업이 이루어지고 있었다 할지라도(하나 혹은 그 이상의), 새로운 fetchData를 시작할 수 있다. 

 

만약에 우리가 가장 최근에 시작된 값의 응답을 얻기 원한다면,  (그러니까, 항상 최신버전의 데이터를 보여주고 싶다면,)

우리는 takeLatest 이팩트를 이용할 수 있다.

import { takeLatest } from 'redux-saga/effects'

function* watchFetchData() {
yield takeLatest('FETCH_REQUESTED', fetchData)
}

 

Unlike takeEvery, takeLatest allows only one fetchData task to run at any moment.

And it will be the latest started task.

If a previous task is still running when another fetchData task is started, the previous task will be automatically cancelled.

If you have multiple Sagas watching for different actions,

you can create multiple watchers with those built-in helpers,

which will behave like there was fork used to spawn them

(we'll talk about fork later. For now, consider it to be an Effect that allows us to start multiple sagas in the background).

 

takeEvery와는 다르게, takeLatest는 한번의 순간에 오직 하나의 fetchData 작업만 수행하도록 허용한다. 

그리고 그렇게 허용되는 것은 아마도 가장 마지막에 수행된 작업이 될 것이다. 

 

만약에  다른 fetchData 작업이 시작되었을 때 이전의 작업이 아직 수행중이었다면, 그러면 이전의 작업은 자연스럽게 취소될 것이다. 

만약에 당신이  다른 액션들을 관찰하고 있는 여러 Saga들을 가지고있다면 ,

내장된 도우미로 여러 명의 감시자를 만들 수 있고
포크가 있었던 것처럼 행동할 것이다. 

 

(fork에 대해서는 나중에 다뤄볼 것이다. 지금은 그냥 다수의 사가들을 시작하도록해주는 하나의 이펙트로 여기면 된다.)

 

For example:

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

// FETCH_USERS
function* fetchUsers(action) { ... }

// CREATE_USER
function* createUser(action) { ... }

// use them in parallel
export default function* rootSaga() {
yield takeEvery('FETCH_USERS', fetchUsers)
yield takeEvery('CREATE_USER', createUser)
}