Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
redux-sagaで副作用をコントロールする
Search
Yuki Kodama
July 15, 2016
Technology
4
1.6k
redux-sagaで副作用をコントロールする
2016/07/14 に行われた M3 tech meetup! #2 で使った発表資料です。
Yuki Kodama
July 15, 2016
Tweet
Share
More Decks by Yuki Kodama
See All by Yuki Kodama
マイクロフロントエンドの現状確認
kuy
0
460
Reason
kuy
1
2.3k
redux-towerでルーティングを制する
kuy
4
2.8k
Should I use redux-saga or not?
kuy
2
4.6k
Rails+webpackの落ち穂拾い
kuy
0
1.8k
なぜReduxを使うのか
kuy
25
12k
意地でもReduxを使う
kuy
1
570
Other Decks in Technology
See All in Technology
Lessons from CVE-2025-22869: Memory Debugging and OSS Vulnerability Reporting
vvatanabe
2
110
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
7
69k
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
13
3.9k
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
700
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
yuj1osm
1
180
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
shuyakinjo
0
630
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
4
1.2k
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
190
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
5
1.3k
絶対に失敗できないキャンペーンページの高速かつ安全な開発、WINTICKET × microCMS の開発事例
microcms
0
350
制約理論(ToC)入門
recruitengineers
PRO
8
3.6k
生成AI時代に必要な価値ある意思決定を育てる「開発プロセス定義」を用いた中期戦略
kakehashi
PRO
1
230
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Gamification - CAS2011
davidbonilla
81
5.4k
Six Lessons from altMBA
skipperchong
28
4k
Embracing the Ebb and Flow
colly
87
4.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
A Tale of Four Properties
chriscoyier
160
23k
The Invisible Side of Design
smashingmag
301
51k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Transcript
redux-sagaで副作用をコントロールする @kuy / Yuki Kodama 2016.07.14 @ M3 tech meetup!
#2
自己紹介 @kuy (カイ) / Yuki Kodama 株式会社ジャパンベンチャーリサーチ entrepedia(アントレペディア)の開発・運用 AWS, Ruby
on Rails, JavaScript (React + Redux) • redux-sagaで非同期処理と戦う • Reduxでコンポーネントを再利用する • Reduxのmiddlewareを積極的に使っていく • ・・・など Qiita の記事 発表 • なぜReduxを使うのか
副作用とは 「状態を変更して、そのあとの計算に影響を与えること」 • それ、全部じゃね・・・? • 副作用がないと現実世界に影響を与えられない
副作用の何が困るのか • 明示的に与えた入力以外のデータに依存している ◦ グローバル変数など • 計算結果以外に何か状態を変化させる ◦ 通信処理とかもこれに含まれる 影響の範囲を予測しづらい
副作用をコントロールする • 副作用を発生させる場所を限定する • 副作用コードをテスト可能にする
Redux での副作用 1. ユーザーによるイベントが発生 2. アプリケーションの状態からパラメータを決定 3. リクエストを発行 4. 取得したデータを状態に反映
典型的な副作用として通信処理を考える
redux-thunk による実装 Action Creator
redux-thunk の問題点 • 外からは何が行われるのかわからない ◦ dispatchやgetStateは使われているのか? ◦ 通信処理を開始するのか? • 本来Actionを生成するだけのはずのAction
Creatorが関数を返す ◦ PromiseのCallback Hellを引き起こす redux-thunk は「GOTO文ミドルウェア」 [Medium] “Redux side effects and you” by Francois Ward
redux-saga • Reduxミドルウェアの一種 • 副作用のあるコードを一手に引き受ける • 非同期コードを同期的に書ける(coみたいなやつ) • テストしやすくなる
redux-saga の仕組み Sagaと呼ばれる独立して動く処理を定義 Effectsを使ってロジックを記述 • Generator関数(yieldを使う) • 小さなタスクのような感じ • call:
(非)同期関数呼び出し • select: 状態の取得する • put: Actionのdispatch • take: Actionを待ち受ける • fork: 別の Saga を起動する • cancel: 起動した Saga を中止する • ....などなど redux-saga が提供する実行環境で Saga を起動する
redux-saga の動作イメージ
redux-saga による実装 Action Creator Selector Saga
2つのコードの違い • redux-thunkは副作用コードを関数でラッピングしている • redux-sagaは副作用コードをデータとして扱って、実行はミドルウェ アに任せている 副作用をその場で実行しているかどうか テストのしやすさにつながる
副作用コードをデータとして扱う yield api('/hoge'); // BAD yield call(api, '/hoge'); // GOOD
データとして扱えていないケース データとして扱えているケース Promise が yield される。解決を待ってくれるけど、どの関数を 呼び出したのかが不明である Effect オブジェクトが yield される。 ただのオブジェクトなので何を呼び出したのかわかる
Saga のテストコード ぎりぎりまでモックを使わないでテストできる
まとめ • 副作用はなくてはならないものなので、プログラム全体に散 らばらないように書く場所を限定する • redux-saga は副作用コードをデータとして扱うためのライブ ラリ • テストしやすいコードにしておくのは大事
参考資料 [Qiita] “AffですべてのPromises/Generatorsを過去にする/そして何故 我々は作用をモナドで抽象化すべきなのか” by @hiruberuto [GitHub] “Redux Ecosystem Links
> Side Effects” markerikson/redux-ecosystem-links
Thank you!