[introduction] Redux-Sagaを簡単に説明したい

前書き

• 参考資料
• Redux-Sagaの正確な知識が知りたい方はRedux-Saga公式HPへ
• 初級者でもRedux-Sagaを簡単に使えるようにしたかった
• なるべく簡単な概念やパターンを使って説明したい
• Reduxについてaction, reducer, dispatch, storeの基本的な知識がある方向け

generatorオブジェクト、generator関数

generatorの概念を知っているとRedux-Sagaの理解度も深まる

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generator(); // "Generator { }"

console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

上記はgenerator関数のサンプル
上記のコードを観察するとyieldで積み上げた値をnext()で順番に取得しているのが分かる(達磨落としみたい)

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

const delay = (ms) => new Promise(res => setTimeout(res, ms))

// Our worker Saga: will perform the async increment task
export function* incrementAsync() {
  yield delay(1000)
  yield put({ type: 'INCREMENT' })
}

// Our watcher Saga: spawn a new incrementAsync task on each INCREMENT_ASYNC
export function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync)
}

上記はgenerator関数を使ったredux-sagaの実装
これも先程のgenerator関数の基本を押さえておけば理解することができる
つまり、incrementAsyncにyieldで積み上げられたタスクが順番に実行されるので

1. 1000ミリ秒(1秒)待機する
2. put処理でactionが呼ばれる

という流れになる

takeEveryはaction_typeに対する待機状態を作るためのもの
つまり「いつ呼ばれてもOKです！」という状態を作る

次回

• 次はEffectについて理解を深めていく