Redux Saga

Generator Functions

 쉬엄 쉬엄 실행되는 함수

function* doSomething()

함수이긴 함수인데 도중에 나갈 수도 있고 나중에 다시 들어올 수 있는 함수.
다시 들어올 때는 그 전의 상태(context)는 보존 되어있음
function* countToNumber(n) {
  let counter = 0;
  while (counter < n) {
   yield counter;
   counter = counter + 1;
  }
}

const a = countToNumber(10);

a.next()

for (let i of a) {
  console.log(i)
}
Generator들은 수동적이다. 
어느 시점에 실행될지를 Generator를 사용하는 쪽에서 정할 수 있다
yield 의 기능은 return과 비슷하지만 가장 큰 차이는 return은 값을 돌려주고 함수 실행이 종료. yield는 값을 돌려주지만 함수는 정지

function* countToNumber() {
  let counter = 0;
  let n = yield;
  while (counter < n) {
   yield counter;
   counter = counter + 1;
  }
}

const a = countToNumber();

a.next() // 어디?
a.next(100) // 어디?

for (let i of a) {
  console.log(i)
}
대부분 return의 형태로 사용하지만 yield는 정지 됐을때 새로운 값을 받아오는 형태로 사용될 수 도 있다
function request(url) {
  fetch(url)
    .then((data) => {
      it.next({ data })
    })
}

function* main() {
  var result = yield request('http://abc.com');
  var data = JSON.parse(result);

  var result2 = yield request('http://abc.com' + data.id);
  console.log(result2);
}

var it = main();
it.next();
조금은 더 와닿는 형태

첫번째 요청에서 어떤 값을 가져와서 두번째 요청을 보낼때 사용하고 싶다면?

function request(url) {
  fetch(url)
    .then((data) => {
      it.next({ data })
    })
}

function* main() {
  var result = yield request('http://abc.com');
  var data = JSON.parse(result);

  var result2 = yield request('http://abc.com' + data.id);
  console.log(result2);
}

var it = main();
it.next();
generator 패턴이든, async-await 패턴이든 비동기 코드를 동기 코드 모양대로 표현할 수 있게 해주는 방법일 뿐
Redux-saga

Saga란? App과 별개로 구동되는 Thread

Side Effect 담당. 여기서 Side Effect란?

앱과 직접적인 상관이 없는 것들.

예를 들면 API 요청 (비동기)

Redux State 동기화

일정한 간격으로 실행되어야하는 Task 등등

Redux-Thunk에 비하면 마법적인 요소가 많음

Saga가 어떻게 돌고 있고, 어떤 식으로 내부에 구성되어있는 지 알 수 없음 (알 필요가 없음)

그냥 제공하는 기능들을 적재적소에 사용하면 됨

 

셋업하기

// store.js 내부
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import reducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();

const createStoreWithMiddleware = applyMiddleware(sagaMiddleware, logger)(createStore);

const store = createStoreWithMiddleware(reducer);

sagaMiddleware.run(rootSaga);
Saga는 일반적으로 두 종류가 있음

* Watcher

redux store에서 발생하는 모든 액션을 감시하고, 특정 액션이 발생하면 Worker Saga에게 지시를 내림

* Worker

실질적인 SideEffect를 처리하는 로직이 들어가는 부분

기억해야할 함수 3가지
  • take (takeEvery, takeLatest)
    • 특정 액션을 관찰하고 발생했을 때 실행시킬 Worker 정보를 담은 명령 객체를 생성
  • call
    • 특정 함수를 호출하라는 명령 객체를 생성
  • put
    • ( redux store로 액션을 발사시키는 명령 객체를 생성)
기억해야할 함수 3가지
  • take (takeEvery, takeLatest)
    • 특정 액션을 관찰하고 발생했을 때 실행시킬 Worker 정보를 담은 명령 객체를 생성
  • call
    • 특정 함수를 호출하라는 명령 객체를 생성. Promise의 형태의 경우에는 resolve 될때까지 기다려줌
  • put
    • ( redux store로 액션을 발사시키는 명령 객체를 생성)

 

왜 명령 객체를 생성할까? 

깔끔. 테스트하기 매우 용이해짐. Mocking이 필요없음

기존 Async Action Creator들을 Redux-Saga로 옮겨보기

<맛보기>

Title Text

Made with Slides.com