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

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

Transcript

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

   View Slide

2. 自己紹介
   @kuy (カイ) / Yuki Kodama
   株式会社ジャパンベンチャーリサーチ
   entrepedia（アントレペディア）の開発・運用
   AWS, Ruby on Rails, JavaScript (React + Redux)
   ● redux-sagaで非同期処理と戦う
   ● Reduxでコンポーネントを再利用する
   ● Reduxのmiddlewareを積極的に使っていく
   ● ・・・など
   Qiita の記事
   発表 ● なぜReduxを使うのか
   

   View Slide

3. 副作用とは
   「状態を変更して、そのあとの計算に影響を与えること」
   ● それ、全部じゃね・・・？
   ● 副作用がないと現実世界に影響を与えられない
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. redux-thunk による実装
   Action Creator
   

   View Slide

8. redux-thunk の問題点
   ● 外からは何が行われるのかわからない
   ○ dispatchやgetStateは使われているのか？
   ○ 通信処理を開始するのか？
   ● 本来Actionを生成するだけのはずのAction Creatorが関数を返す
   ○ PromiseのCallback Hellを引き起こす
   redux-thunk は「GOTO文ミドルウェア」
   [Medium] “Redux side effects and you” by Francois Ward
   

   View Slide

9. redux-saga
   ● Reduxミドルウェアの一種
   ● 副作用のあるコードを一手に引き受ける
   ● 非同期コードを同期的に書ける（coみたいなやつ）
   ● テストしやすくなる
   

   View Slide

10. redux-saga の仕組み
    Sagaと呼ばれる独立して動く処理を定義 Effectsを使ってロジックを記述
    ● Generator関数（yieldを使う）
    ● 小さなタスクのような感じ
    ● call: (非)同期関数呼び出し
    ● select: 状態の取得する
    ● put: Actionのdispatch
    ● take: Actionを待ち受ける
    ● fork: 別の Saga を起動する
    ● cancel: 起動した Saga を中止する
    ● ....などなど
    redux-saga が提供する実行環境で Saga を起動する
    

    View Slide

11. redux-saga の動作イメージ
    

    View Slide

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

    View Slide

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

    View Slide

14. 副作用コードをデータとして扱う
    yield api('/hoge'); // BAD
    yield call(api, '/hoge'); // GOOD
    データとして扱えていないケース
    データとして扱えているケース
    Promise が yield される。解決を待ってくれるけど、どの関数を
    呼び出したのかが不明である
    Effect オブジェクトが yield される。
    ただのオブジェクトなので何を呼び出したのかわかる
    

    View Slide

15. Saga のテストコード
    ぎりぎりまでモックを使わないでテストできる
    

    View Slide

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

    View Slide

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

    View Slide

18. Thank you!
    

    View Slide