redux-saga

参考資料

• https://redux-saga.js.org/docs/introduction/BeginnerTutorial
• https://qiita.com/macotok/items/ec5460ac17f5a20c4735
• https://fintan.jp/?p=3064
• https://tech.stmn.co.jp/entry/2020/05/14/143012

特徴

• 非同期処理をシンプルにする
  • 読みやすく、書きやすく、テストしやすい
  • generator のおかげ
• Composition の思想を持つ？
  • 複数のタスクを、並行実行したり、レース実行したり、キャンセルしたりできる。

メリット

• 複雑化しにくい(ほんとか)
  • redux-thunk は Action Creater に処理を記述する一方で、
  • redux-saga は saga コンポーネントに記述できるから
• テストが書きやすい
• Async/Await などの非同期処理のネストが深くならずに済む

Effect

用語

• Effect
  • プレーンなオブジェクト
  • generator で作成される
  • middleware で解釈される
• Effect creators
  • Effect を生成する役割を持つ関数
  • generator の中で使用する

Effect creators の一覧

• take, takeEvery, takeLatest
  • 処理をスタートするための action を拾うために使う
  • watchDeleteUserRequest的な generator の中に記載する
  • 引数に実際に実行したい generator を渡す
  • ３つの違い
    • take --- 同じアクションが複数回来たときは逐次処理する？自信なし
    • takeEvery --- 同じアクションが複数回来たときは並行処理する。迷ったらこれか？
    • takeLatest --- 同じアクションが複数回来たときは古い処理をキャンセルして最新のもののみ処理する。
• call
  • Promise 等を引数に取る
  • Promise 等の完了を待つ
  • 引数には API リクエストを行う関数+引数を与える。
  • 同期的
  • 非同期的に使いたい場合は fork を使え
• put
  • redux の dispatch と同じ
• select
  • store の値をとってこれる（用法・用量を守らないと大変なことになりそうな予感）

基本的なコード

以下の例では、Wather saga は、INCREMENT_ASYNCを受け取るごとに、incrementAsyncタスクを spawn (並行実行)する。

// Worker sagaという
export function* incrementAsync() {
  yield somePromiseToDelay(1000);
  yield put({ type: 'INCREMENT' });
}

// Watcher sagaという。最終的にこれをmiddlewareに渡す。
export function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync);
}

並行実行

並行で複数の非同期処理を走らせるには all を使う。以下の場合に処理が次に進む。

• すべて resolve される
• いずれかが reject される

yield all([call(fetchData1, text1), call(fetchData2, text2)]);

Promise を yield する

• Promise が yield された場合、saga(middleware) はその処理の終了を待つ
• Promise が完了すると、saga は次の処理を開始する
• yield 文に直接 Promise を渡すと、yield された瞬間にその Promise は実行開始される。
  • これは特にテスト時などに都合が悪いので、call でラップして使うとよい。

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

export function* someFunc() {
  yield delay(1000);
  // or
  yield call(delay, 1000);

  // これは1秒後に実行される
  yield someOtherFunc();
}

テスト

• 前提知識
  • putやcall(Effect creator)はプレーンなオブジェクト(Effect)を返す。
  • これらで関数をラップすると、テストが楽になる
    • put を使えば dispatch をモックする必要がなくなるし、
    • call を使えば関数をモックする必要がなくなる

put({ type: 'INCREMENT' }); // => { PUT: {type: 'INCREMENT'} }
call(delay, 1000); // => { CALL: {fn: delay, args: [1000]}}

Effect creator でラップすることで、以下のようなテストを書くことが可能になる

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

function* incrementAsync() {
  // テストできるようにするため、delayを直接呼ばずに、callでラップして使う
  yield call(delay, 1000);
  yield put({ type: 'INCREMENT' });
}

test('incrementAsync Saga test', (assert) => {
  const gen = incrementAsync();

  assert.deepEqual(
    gen.next().value,
    call(delay, 1000), // テストの理想形をこう書ける。なぜならcallの返り値はプレーンなオブジェクトだから。
    'incrementAsync Saga must call delay(1000)',
  );

  assert.deepEqual(
    gen.next().value,
    put({ type: 'INCREMENT' }), // 同上
    'incrementAsync Saga must dispatch an INCREMENT action',
  );

  assert.deepEqual(
    gen.next(),
    { done: true, value: undefined },
    'incrementAsync Saga must be done',
  );

  assert.end();
});

API のモックが必要になときは、愚直にモックするのではなく、generator.next(期待される結果)を使うと簡単。

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

const iterator = fetchProducts();

// APIがコールされていることをテスト
assert.deepEqual(
  iterator.next().value,
  call(Api.fetch, '/products'),
  "fetchProducts should yield an Effect call(Api.fetch, './products')",
);

const fakeProducts = {};

// アクションがdispatchされていることをテスト
assert.deepEqual(
  // nextに引数を与えると、前回のyieldの結果を上書きできる。まじか。
  iterator.next(fakeProducts).value,
  put({ type: 'PRODUCTS_RECEIVED', fakeProducts }),
  "fetchProducts should yield an Effect put({ type: 'PRODUCTS_RECEIVED', products })",
);

エラーハンドリング

普通に try-catch で OK

function* fetchProducts() {
  try {
    const products = yield call(Api.fetch, '/products');
    yield put({ type: 'PRODUCTS_RECEIVED', products });
  } catch (error) {
    yield put({ type: 'PRODUCTS_REQUEST_FAILED', error });
  }
}

エラー系のテストをしたい場合、以下のようにthrow()を使う

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

const fakeError = {};

assert.deepEqual(
  iterator.throw(fakeError).value,
  put({ type: 'PRODUCTS_REQUEST_FAILED', fakeError }),
  "fetchProducts should yield an Effect put({ type: 'PRODUCTS_REQUEST_FAILED', error })",
);

グローバルなエラーハンドラを設定することも可能ではあるものの、最終的な保険としてのみ利用するのが良い、とのこと。