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
360
Reason
kuy
1
2.2k
redux-towerでルーティングを制する
kuy
4
2.8k
Should I use redux-saga or not?
kuy
2
4.4k
Rails+webpackの落ち穂拾い
kuy
0
1.7k
なぜReduxを使うのか
kuy
25
11k
意地でもReduxを使う
kuy
1
540
Other Decks in Technology
See All in Technology
入門 バックアップ
ryuichi1208
18
6.9k
Perlで始めるeBPF: 自作Loaderの作り方 / Getting started with eBPF in Perl_How to create your own Loader
takehaya
1
940
DenoでもViteしたい!インポートパスのエイリアスを指定してラクラクアプリ開発
bengo4com
2
2k
Road to Single Activity Uncovered
yurihondo
0
100
WSUSが非推奨に!? Windowsの更新管理を改めて勉強する!
ebibibi
0
160
Develop to Survive - YAPC::Hakodate 2024 Keynote
moznion
8
2.7k
品質マネジメントで抑えておきたい2つのリスクを見分けて未来に備えよう #yapcjapan
makky_tyuyan
0
110
ゼロから実装まで!機械学習入門
natsuki0726
0
190
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
340
テクニカルライターのチームで「目標」をどう決めたか / MVV for a Team of Technical Writers
lycorptech_jp
PRO
3
100
kube-vipとkube-proxy置き換えCiliumを積んだ究極のK3sクラスタを建てる
logica0419
4
220
リスクから学ぶKubernetesコンテナセキュリティ/k8s-risk-and-security
mochizuki875
1
330
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
93
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
GraphQLとの向き合い方2022年版
quramy
43
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.7k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
The Language of Interfaces
destraynor
154
24k
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!