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

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

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

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

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

    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. 2つのコードの違い
    ● 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