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.5k
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
290
Reason
kuy
1
2.1k
redux-towerでルーティングを制する
kuy
4
2.8k
Should I use redux-saga or not?
kuy
2
4.3k
Rails+webpackの落ち穂拾い
kuy
0
1.6k
なぜReduxを使うのか
kuy
25
11k
意地でもReduxを使う
kuy
1
530
Other Decks in Technology
See All in Technology
オブジェクト指向CSSが叶えたかったことと、CSSのいま / The aims of Object-oriented CSS and the current state of CSS usage
shinkufencer
11
3.6k
プッシュ型子育てサービスを、先行プロジェクト実施自治体において開始します
govtechtokyo
0
270
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
120
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
190
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
210
MongoDB Atlas Vectorsearchではじめる生成AIアプリ開発
chie8842
3
510
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
130
Kubeflow Pipelines v2 で変わる機械学習パイプライン開発
asei
4
340
暗黙知を集積するプラットフォーム : 「健常者エミュレータ事例集」の取り組み
sora32127
1
160
イチから学ぶdbt / Learn dbt from scratch
shinyaa31
0
130
Tohoku.Tech #1 「EC-CUBE/AWSの構築をChatGPTに相談してみました」by テンダ
jun2882
0
140
データ品質をコード化! LINEヤフーのMLOpsを最適化する "ACP Data Quality" の紹介
lycorptech_jp
PRO
2
220
Featured
See All Featured
Web development in the modern age
philhawksworth
201
10k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
RailsConf 2023
tenderlove
0
510
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Agile that works and the tools we love
rasmusluckow
323
20k
For a Future-Friendly Web
brad_frost
170
8.9k
Designing with Data
zakiwarfel
94
4.8k
The Invisible Side of Design
smashingmag
293
49k
YesSQL, Process and Tooling at Scale
rocio
160
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
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!