Upgrade to Pro — share decks privately, control downloads, hide ads and more …

redux-sagaで副作用をコントロールする

 redux-sagaで副作用をコントロールする

2016/07/14 に行われた M3 tech meetup! #2 で使った発表資料です。

70ac3e9e67226ea693e90c7eb8605cd7?s=128

Yuki Kodama

July 15, 2016
Tweet

More Decks by Yuki Kodama

Other Decks in Technology

Transcript

  1. redux-sagaで副作用をコントロールする @kuy / Yuki Kodama 2016.07.14 @ M3 tech meetup!

    #2
  2. 自己紹介 @kuy (カイ) / Yuki Kodama 株式会社ジャパンベンチャーリサーチ entrepedia(アントレペディア)の開発・運用 AWS, Ruby

    on Rails, JavaScript (React + Redux) • redux-sagaで非同期処理と戦う • Reduxでコンポーネントを再利用する • Reduxのmiddlewareを積極的に使っていく • ・・・など Qiita の記事 発表 • なぜReduxを使うのか
  3. 副作用とは 「状態を変更して、そのあとの計算に影響を与えること」 • それ、全部じゃね・・・? • 副作用がないと現実世界に影響を与えられない

  4. 副作用の何が困るのか • 明示的に与えた入力以外のデータに依存している ◦ グローバル変数など • 計算結果以外に何か状態を変化させる ◦ 通信処理とかもこれに含まれる 影響の範囲を予測しづらい

  5. 副作用をコントロールする • 副作用を発生させる場所を限定する • 副作用コードをテスト可能にする

  6. Redux での副作用 1. ユーザーによるイベントが発生 2. アプリケーションの状態からパラメータを決定 3. リクエストを発行 4. 取得したデータを状態に反映

    典型的な副作用として通信処理を考える
  7. redux-thunk による実装 Action Creator

  8. redux-thunk の問題点 • 外からは何が行われるのかわからない ◦ dispatchやgetStateは使われているのか? ◦ 通信処理を開始するのか? • 本来Actionを生成するだけのはずのAction

    Creatorが関数を返す ◦ PromiseのCallback Hellを引き起こす redux-thunk は「GOTO文ミドルウェア」 [Medium] “Redux side effects and you” by Francois Ward
  9. redux-saga • Reduxミドルウェアの一種 • 副作用のあるコードを一手に引き受ける • 非同期コードを同期的に書ける(coみたいなやつ) • テストしやすくなる

  10. redux-saga の仕組み Sagaと呼ばれる独立して動く処理を定義 Effectsを使ってロジックを記述 • Generator関数(yieldを使う) • 小さなタスクのような感じ • call:

    (非)同期関数呼び出し • select: 状態の取得する • put: Actionのdispatch • take: Actionを待ち受ける • fork: 別の Saga を起動する • cancel: 起動した Saga を中止する • ....などなど redux-saga が提供する実行環境で Saga を起動する
  11. redux-saga の動作イメージ

  12. redux-saga による実装 Action Creator Selector Saga

  13. 2つのコードの違い • redux-thunkは副作用コードを関数でラッピングしている • redux-sagaは副作用コードをデータとして扱って、実行はミドルウェ アに任せている 副作用をその場で実行しているかどうか テストのしやすさにつながる

  14. 副作用コードをデータとして扱う yield api('/hoge'); // BAD yield call(api, '/hoge'); // GOOD

    データとして扱えていないケース データとして扱えているケース Promise が yield される。解決を待ってくれるけど、どの関数を 呼び出したのかが不明である Effect オブジェクトが yield される。 ただのオブジェクトなので何を呼び出したのかわかる
  15. Saga のテストコード ぎりぎりまでモックを使わないでテストできる

  16. まとめ • 副作用はなくてはならないものなので、プログラム全体に散 らばらないように書く場所を限定する • redux-saga は副作用コードをデータとして扱うためのライブ ラリ • テストしやすいコードにしておくのは大事

  17. 参考資料 [Qiita] “AffですべてのPromises/Generatorsを過去にする/そして何故 我々は作用をモナドで抽象化すべきなのか” by @hiruberuto [GitHub] “Redux Ecosystem Links

    > Side Effects” markerikson/redux-ecosystem-links
  18. Thank you!