[리덕스사가 공식문서 번역] 액션을 스토어에 디스패치하는 방법(Dispatching actions to the store)

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

Dispatching Actions | Redux-Saga

리덕스 사가의 공식문서를 번역한 글입니다. 

---

Taking the previous example further, let's say that after each save, 

we want to dispatch some action to notify the Store that the fetch has succeeded

(we'll omit the failure case for the moment).

We could pass the Store's dispatch function to the Generator.

Then the Generator could invoke it after receiving the fetch response:

앞의 예시에서 더 나아가, 각각의 저장후에 우리는 패치작업이 성공했다는 것을 스토어에게 알리는 액션을 디스패치하고싶습니다. 

(실패하는 경우도 다뤄볼 것입니다)

우리는 스토어의 디스패치함수를 제네레이터에 주입할 수 있습니다. 

그러고나면 제네레이터는 패치의 응답을 받고나서 그 액션을 호출할 수 있게 됩니다. 아래의 예시를 봅시다. 

function* fetchProducts(dispatch) {
const products = yield call(Api.fetch, '/products')
dispatch({ type: 'PRODUCTS_RECEIVED', products })
}

---

However, this solution has the same drawbacks as invoking functions directly from inside the Generator (as discussed in the previous section).

If we want to test that fetchProducts performs the dispatch after receiving the AJAX response, we'll need again to mock the dispatch function.

Instead, we need the same declarative solution.

Create a plain JavaScript Object to instruct the middleware that we need to dispatch some action, and let the middleware perform the real dispatch.

This way we can test the Generator's dispatch in the same way:

by inspecting the yielded Effect and making sure it contains the correct instructions.

The library provides, for this purpose, another function put which creates the dispatch Effect.

그러나, 이 해결책은 함수를 제네레이터 안에서 직접 호출한다는 똑같은 단점이 있습니다. (우리가 이전 섹션에서 다루었던 것 처럼)

만약 우리가  fetchProducts 함수가 AJAX의 응답을 받은 이후에 디스패치를 수행하는 것을 테스트하기 원한다면, 디스패치 함수를 다시 mock해야할 것입니다. 

대신에 우리는 같은 선언적인 해결책이 필요합니다.  우선 일반적인 자바스크립트 객체를 만듭니다.  그 객체는 우리는 몇몇 액션을 디스패치하는 것이 필요하다고 미들웨어에게 지시하기 위한 것입니다. 그러고 나서, 미들웨어로 실제 디스패치를 수행하게 합니다. 

이 방법으로 우리는 제네레이터의 디스패치를 테스트할 수 있습니다. 생성된 이팩트를 조사하고, 이것들이 정확한 지시들을 포함한다는 것을 확실하게 만듦으로써.

이러한 목적에서, 라이브러리는 또 다른 함수 put을 제공합니다. 이 put은 디스패치 이팩트를 만듭니다. 

 

import { call, put } from 'redux-saga/effects'
// ...
function* fetchProducts() {
const products = yield call(Api.fetch, '/products')
// create and yield a dispatch Effect
yield put({ type: 'PRODUCTS_RECEIVED', products })
}

 

---

Now, we can test the Generator easily as in the previous section

이제 우리는 이전 색션과 같이 제네레이터를 쉽게 테스트할 수 있습니다. 

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

const iterator = fetchProducts()
// expects a call instruction

assert.deepEqual(
iterator.next().value,
call(Api.fetch, '/products'),
"fetchProducts should yield an Effect call(Api.fetch, './products')"
)

// create a fake response
const products = {}

// expects a dispatch instruction
assert.deepEqual(
iterator.next(products).value,
put({ type: 'PRODUCTS_RECEIVED', products }),
"fetchProducts should yield an Effect put({ type: 'PRODUCTS_RECEIVED', products })"
)

---

Note how we pass the fake response to the Generator via its next method.

Outside the middleware environment, we have total control over the Generator,

we can simulate a real environment by mocking results and resuming the Generator with them.

Mocking data is a lot easier than mocking functions and spying calls.

 

다음 메서드에서 우리가 어떻게 가짜 응답을 제네레이터에 주입하는지에 주목해봅시다. 

미들웨어 바깥 환경에서, 우리는 제네레이터에 대한 전적인 통제를 가지고 있습니다.

그리고 우리는 가짜 결과를 가지고 실제 환경을 시뮬레이션 해볼 수 있고, 그것들을 가지고 제네레이터를 재게시켜볼 수 있습니다. 

가짜 데이터를 만드는 것은 가짜 함수들을 만드는 것보다 훨씬 더 쉽습니다.