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
470
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
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
sansantech
PRO
1
130
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
110
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
3
3.1k
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
220
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
180
ソースを読む時の思考プロセスの例-MkDocs
sat
PRO
1
150
AI時代、“平均値”ではいられない
uhyo
8
2.5k
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
150
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
130
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
150
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
1
170
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Scaling GitHub
holman
463
140k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
KATA
mclloyd
PRO
32
15k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
A designer walks into a library…
pauljervisheath
209
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Faster Mobile Websites
deanohume
310
31k
The Pragmatic Product Professional
lauravandoore
36
7k
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!