React + FLUX + Redux + Redux Saga のお話
-
Upload
shinichiro-yoshida -
Category
Technology
-
view
5.817 -
download
6
Transcript of React + FLUX + Redux + Redux Saga のお話
![Page 1: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/1.jpg)
React + FLUX + Redux + ReduxSagaのお話
2017/03/23(木)
ARCANA Meetup #23
よしだしんいちろう
![Page 2: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/2.jpg)
自己紹介
name: “よしだ しんいちろう”
age: 33
worksAt: “Studio Arcana co.,Ltd.”
roles: [
“Web Application Developer”,
“Management”
]
twitter: “@yossy222”
graduated: [
“Advanced Institute of Industrial Technology”,
“National Institute of Technology, Kushiro College”
]
2
![Page 3: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/3.jpg)
自己紹介
Prototype.js/script.aculo.us (2007年頃)
YUI Library(2008年頃)
jQuery/jQuery UI(2008年~)
Backbone.js(2013年頃)
Riot.js(2016年頃)
Angular.js(2014年~)
React.js(2014年~)
Vue.js(2016年~)
3
![Page 4: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/4.jpg)
自己紹介
と、フロントエンドやってる人っぽく書いてみましたが、
本業はディレクション/マネジメントです。
むかしはCOBOLとかJavaとかCとかRubyとかやってました。
いまはPHPとJavaScriptがほとんどです。
AWSでインフラ作ったりするときもあります。
4
![Page 5: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/5.jpg)
はじめに
5
![Page 6: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/6.jpg)
はじめに
社内勉強会 #21でお話しした『実践 Redux Saga』
というスライドの圧縮版です。
ご了承を…!
6
![Page 7: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/7.jpg)
はじめに
ほんだい
7
![Page 8: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/8.jpg)
はじめに
プロダクションの案件でRedux Sagaを
使ってみたということで、そのお話をしてみます。
8
![Page 9: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/9.jpg)
はじめに
Redux Sagaを使うにあたり、
どのような指針で設計をしたか?なぜそのような指針にしたか?その結果、何が見えてきたか?
といった感じの内容です。
9
![Page 10: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/10.jpg)
はじめに
設計思想や考え方の話が多く、抽象的なクダリも多いですが、ご承知おきください。
あと、Redux Sagaまでの前置きの話も長いです。
10
![Page 11: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/11.jpg)
技術要素
11
![Page 12: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/12.jpg)
技術要素
React , Redux , Redux Saga , Apache
Cordova , Onsen UI , Sqlite , WebSQL ,
WebAPI(Ajax) , Webpack , Babel(stage-0),
ES6 , Generator(ES6) , Promise(ES6),
Gulp, Sass
あたりの技術を使ってます。今日のお話しは、赤字の部分だけ。
12
![Page 13: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/13.jpg)
今日お話しすること
13
![Page 14: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/14.jpg)
今日お話しすること
jQuery
React
FLUX
Redux
Redux Saga
14
![Page 15: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/15.jpg)
今日お話しすること
順番にいってみよう
15
![Page 16: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/16.jpg)
jQuery
16
![Page 17: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/17.jpg)
jQuery
jQueryはみんな知ってますね?
17
![Page 18: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/18.jpg)
jQuery
画面の状態を変更するときは、DOMを直接操作します。
18
![Page 19: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/19.jpg)
jQuery
19
HTML HTML
HTMLのDOMを直接操作する
![Page 20: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/20.jpg)
jQuery
シンプルな構成のサイトで使う分には、全く問題ない。
20
![Page 21: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/21.jpg)
jQuery
静的なHTMLのサイトで、
ちょっとアコーディオン。ちょっとインタラクション。ちょっとタブ切り替え。
ちょっと外部APIを呼び出す。
など
21
![Page 22: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/22.jpg)
jQuery
しかし、DOMの変更を多用すると、どこで何が起きているかわからなくなる。
22
![Page 23: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/23.jpg)
jQuery
外部からデータを取得して、HTMLテンプレート定義して、
テンプレートの文字列を置換して、画面に結果のHTMLを表示して、
23
![Page 24: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/24.jpg)
jQuery
.append()…
.appendTo()…
.addClass()…
.attr()…
…???
24
![Page 25: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/25.jpg)
jQuery
その間にユーザーが別の操作をしたらどうなる?
外部からデータが取得できなかったらどうなる?
データ呼出しのボタンを連打されたらどうなる?
25
![Page 26: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/26.jpg)
jQuery
DOM操作するタイミングで、既にDOMの構造が
変化していたらどうなる?
CSSクラス名を付けたり消したりするタイミングが重複したらどうなる?
26
![Page 27: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/27.jpg)
jQuery
いろんな所でイベントリスナー監視しまくりのコードを
自分が引き継いだら理解できる?
27
![Page 28: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/28.jpg)
jQuery
28
HTML
![Page 29: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/29.jpg)
jQuery
29
HTML HTML
![Page 30: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/30.jpg)
jQuery
30
HTML HTML HTML
![Page 31: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/31.jpg)
jQuery
31
HTML HTML HTML
HTML
![Page 32: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/32.jpg)
jQuery
32
HTML HTML HTML
HTML HTML
元の状態は…
???
![Page 33: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/33.jpg)
jQuery
33
※出典:山口県周南市徳山動物園のツヨシくん
![Page 34: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/34.jpg)
jQuery
そこで、Reactのでばん
34
![Page 35: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/35.jpg)
jQuery
Reactを使うことで、いくつかの課題を解決できます
35
![Page 36: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/36.jpg)
React
36
![Page 37: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/37.jpg)
React
Reactは、UIを構築するためのライブラリ
37
![Page 38: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/38.jpg)
React
Model, View, ControllerのViewだけ担当みたいな役割
38
![Page 39: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/39.jpg)
React
Componentという単位のパーツを組み合わせて
HTMLのDOM構造を構築する
39
![Page 40: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/40.jpg)
React
Componentのクラスの中でJSXというHTMLっぽい記法で
DOMの構造を定義できる
40
![Page 41: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/41.jpg)
React
41
HTMLComponent
JSX
![Page 42: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/42.jpg)
React
class HelloMessage extends React.Component {render() {return <div>Hello Jane</div>;
}}
ReactDOM.render(<HelloMessage />, mountNode);
42
Component
<div>Hello Jane</div>
HTML
![Page 43: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/43.jpg)
React
HTMLの属性と似たようにPropsという属性も定義できる。
43
![Page 44: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/44.jpg)
React
44
HTMLComponent
Props
PropsはComponentが外部から受け取ることができる値オブジェクト指向でいうとsetterのようなイメージ
JSX
![Page 45: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/45.jpg)
React
class HelloMessage extends React.Component {render() {return <div>Hello {this.props.name}</div>;
}}
ReactDOM.render(<HelloMessage name="Jane" />, mountNode);
45
Component
<div>Hello Jane</div>
HTML
![Page 46: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/46.jpg)
React
ComponentはPropsのほかに、
Stateとよばれる状態を保持することもできる
46
![Page 47: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/47.jpg)
React
47
HTMLComponent
State
Stateは、そのComponentの内部だけで操作できる値オブジェクト指向のprivateプロパティのようなイメージ
JSX
![Page 48: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/48.jpg)
React
画面のDOMの構造は“Props”と“State”
の状態によって、決定する
48
![Page 49: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/49.jpg)
React
49
HTMLComponent
State
Props
JSX
![Page 50: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/50.jpg)
React
jQueryの場合だと
50
![Page 51: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/51.jpg)
React
51
HTML HTML
jQueryの場合
HTMLのDOMを直接操作する
![Page 52: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/52.jpg)
React
Reactの場合だと
52
![Page 53: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/53.jpg)
Component
React
53
HTML
Reactの場合
JSX
![Page 54: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/54.jpg)
Component
Props
React
54
HTML
Reactの場合
JSX
![Page 55: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/55.jpg)
Component
Props
React
55
HTML
State
Reactの場合
JSX
![Page 56: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/56.jpg)
Component
Props
React
56
HTML
State
Reactの場合
JSX
![Page 57: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/57.jpg)
Component
Props
React
57
HTML
State
Reactの場合
JSX
![Page 58: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/58.jpg)
Component
Props
React
58
HTML
State
Reactの場合
JSXとStateとPropsによって、HTMLのDOM構造が決定する
JSX
![Page 59: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/59.jpg)
Component
Props
React
59
HTML
State
Reactの場合
DOMの構造は、Reactが変更を自動的に計算し、差分だけ更新する(Virtual DOM)
JSX
![Page 60: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/60.jpg)
React
Componentは部品ごとに細かく分けてネストもできる
60
![Page 61: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/61.jpg)
React
61
HTMLComponent
Component
Component
Component
子のComponentにはPropsで値を渡すことができるオブジェクト指向でいうと別クラスに委譲して引数で値を渡すイメージ
![Page 62: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/62.jpg)
React
62
Component
Component Component
Component Component
Componentはツリー上の構造にすることもできて、親から子へのデータはPropsで渡していく
![Page 63: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/63.jpg)
React
63
Component
Component Component
Component Component
Callback
Callback
子から親へのデータは、コールバック関数を経由してやり取りする
![Page 64: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/64.jpg)
FLUX
64
![Page 65: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/65.jpg)
FLUX
FLUXは、
アプリケーション構造の
アーキテクチャ
65
![Page 66: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/66.jpg)
FLUX
Hacker Way: Rethinking Web App Development at Facebook
https://www.youtube.com/watch?v=nYkdrAPrdcw
66
![Page 67: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/67.jpg)
FLUX
MVCの場合
※サーバーサイドのMVCではなく、
GUIのMVC (Smalltalk MVC) ね。
67
![Page 68: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/68.jpg)
FLUX
構造が複雑になるとスケールしない。
(ModelとViewのデータフローが双方向で、
コードの影響が予測しにくい)
68
![Page 69: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/69.jpg)
FLUX
この場合も子と親のデータフローが双方向で、
コードの影響が予測しにくい。
69
Component
Component Component
Component Component
Callback
Callback
State更新
![Page 70: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/70.jpg)
FLUX
そこで、FLUXのでばん
70
![Page 71: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/71.jpg)
FLUX
FLUXの場合
71
![Page 72: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/72.jpg)
FLUX
データフローを単方向にすることで、
コードの影響を予測しやすくする
72
![Page 73: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/73.jpg)
FLUX
73
Action
Dispatcher
Store
View
アプリケーションに必要なデータを保持する領域。データの保持と、データを操作するロジックを持つ。Dispatcherにより、メソッドが呼び出される。
Storeの状態によって、描画する画面が決定する。
ボタンを押す、といったようなユーザーの操作。
ユーザー操作を受け取って、Storeのメソッドを呼ぶ。(Actionを受け取って、Storeに指示を送る。)
![Page 74: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/74.jpg)
FLUX
74
HTMLComponent
State
Props
JSX
Reactのイメージがこうだとしたら、
![Page 75: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/75.jpg)
FLUX
75
HTMLComponent
State
Props
JSX
StateがComponentの外に出て、
![Page 76: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/76.jpg)
FLUX
76
HTML
Store
View(Container)
Component
State
Props
JSX
それぞれがStoreとViewという位置づけに。
![Page 77: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/77.jpg)
FLUX
77
HTMLDispatcher
View(Container)
Component
Props
JSX
ActionActionAction
StoreStoreStore
State
そして、こんなデータフローに。
![Page 78: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/78.jpg)
Redux
78
![Page 79: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/79.jpg)
Redux
Reduxは、
FLUXとElmArchitectureに
影響を受けた
ステート管理コンテナ
79
![Page 80: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/80.jpg)
Redux
http://elm-lang.org/
(action, state) => state
Elm“updaters”≒ Redux“reducers”
このあたりの考え方がおなじ。
80
![Page 81: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/81.jpg)
Redux
Reduxは、
FLUXと似ています。
81
![Page 82: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/82.jpg)
Redux
Reduxは制約を強めて、
次のような条件をつきます
82
![Page 83: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/83.jpg)
Redux
「Storeは、ひとつだけ」
「Stateは、原則、読み取り専用」
「状態の変化は、Reducer経由で」
83
![Page 84: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/84.jpg)
Redux
Dispatcherという概念もない
84
![Page 85: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/85.jpg)
Redux
85
Action
Reducer
State アプリケーションに必要なデータを保持する領域。
ボタンを押す、といったようなユーザーの操作。
ユーザー操作を受け取って、新しいStateを返す。(Actionを受け取って、Storeに結果を渡す。)
![Page 86: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/86.jpg)
Redux
86
HTMLDispatcher
View(Container)
Component
Props
JSX
ActionActionAction
StoreStoreStore
State
これはFLUXのときの図
![Page 87: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/87.jpg)
Redux
87
HTML
Reducer
View(Container)
Component
Props
JSX
ActionActionAction
State
Reduxだとこうなる
![Page 88: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/88.jpg)
Redux
88
HTML
Reducer
View(Container)
Component
Props
JSX
ActionActionAction
State
Reduxには、Dispatcherがない。
![Page 89: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/89.jpg)
Store
Redux
89
Reducer
View(Container)
Component
Props
JSX
ActionActionAction
State
Storeはひとつだけ。
HTML
![Page 90: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/90.jpg)
Store
Redux
90
Reducer
View(Container)
Component
Props
JSX
ActionActionAction
State
ちょっと分解してみます
![Page 91: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/91.jpg)
Redux
91
View(Container)
Component
Props
JSX
ActionActionAction
Componentを外にだして、
Store
Reducer
State
![Page 92: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/92.jpg)
Redux
92
Component
Props
JSX
ActionActionAction
Container
Store
Reducer
State
ViewをContainerとします
![Page 93: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/93.jpg)
Redux
93
Component
Props
JSX
ActionActionAction
Container
Store
Reducer
State
![Page 94: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/94.jpg)
Redux
FLUXとだいたい流れは似てますね?
94
![Page 95: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/95.jpg)
Redux
Reduxの強み
Middleware
95
![Page 96: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/96.jpg)
Redux
96
Component
Props
JSX
ActionActionAction
Container
Store
Reducer
State
Reduxには、Middlewareという仕組みがあります
![Page 97: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/97.jpg)
Redux
97
Container
ActionActionAction
Store
Reducer
State
Component
JSX
ちょっと配置を変えまして、
![Page 98: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/98.jpg)
Redux
98
Container
ActionActionAction
Store
Reducer
State
Component
JSX
Middleware
MiddlewareはStoreのココ
![Page 99: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/99.jpg)
Redux
Middlewareを使うことで
外部API呼び出しなどの
非同期処理の取り扱いができる
(副作用とか呼ばれてる)
99
![Page 100: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/100.jpg)
Redux
100
Container
ActionActionAction
Store
Reducer
State
Component
JSX
Middleware外部API
![Page 101: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/101.jpg)
Redux
Middlewareの中のひとつが、
Redux Saga
101
![Page 102: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/102.jpg)
Redux Saga
102
![Page 103: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/103.jpg)
Redux Saga
Actionを受け取って
任意のロジックを非同期で処理
103
![Page 104: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/104.jpg)
Redux Saga
104
Container
Action Action
Reducer
State
Component
JSXSaga
外部API
Action
非同期処理
![Page 105: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/105.jpg)
Redux Saga
Sagaから、別のSagaを
呼び出すこともできる
105
![Page 106: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/106.jpg)
Redux Saga
106
Action
Saga
Saga
外部API
Saga
DB
Saga
外部API
呼出し方は2通り・Fork:非同期で呼出し・Call:同期的に呼出し
Fork
Fork Call
![Page 107: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/107.jpg)
Redux Saga
Actionを発行したり、
受け取ったりすることもできる
107
![Page 108: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/108.jpg)
Redux Saga
108
Reducer
SagaAction
Saga
Put
Take
Action
Put
![Page 109: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/109.jpg)
Redux Saga
実際のところ、どう使うのか
109
![Page 110: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/110.jpg)
Redux Saga
いろいろな組み合わせ方ができるので
人によって実装がバラバラになる
110
![Page 111: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/111.jpg)
Redux Saga
ある程度のガイドラインを決めたい
111
![Page 112: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/112.jpg)
Redux Saga
いろいろ模索してみた結果
112
![Page 113: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/113.jpg)
Redux Saga
素晴らしい記事と出会う
113
![Page 114: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/114.jpg)
Redux Saga
114
https://medium.com/@marcelschulze/using-react-native-with-redux-and-redux-saga-a-new-proposal-ba71f151546f
![Page 115: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/115.jpg)
Redux Saga
ActionはすべてSagaを経由する
115
![Page 116: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/116.jpg)
Redux Saga
Actionを2種類で分けて考える
「System&User Action」
「Reducer Action」
116
![Page 117: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/117.jpg)
Redux Saga
どういうことかというと、
117
![Page 118: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/118.jpg)
Redux Saga
118
Container
Action Action
State
Component
JSXSaga
外部API
Action Reducer
![Page 119: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/119.jpg)
Redux Saga
119
Container
Action Action
State
Component
JSXSaga
外部API
Action Reducer
ユーザー操作のActionは直接Reducerへ渡さない
![Page 120: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/120.jpg)
Redux Saga
120
Container
Action
State
Component
JSXSaga
外部API
Action Reducer
単一のデータフローを維持(副作用ではなく、主作用として考える)
![Page 121: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/121.jpg)
Redux Saga
121
Container
Action
State
Component
JSXSaga
外部API
Action Reducer
User Action
Reducer Action
![Page 122: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/122.jpg)
Redux Saga
「System&User Action」
ユーザーが操作したアクション
or
システムから発生したアクション
122
![Page 123: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/123.jpg)
Redux Saga
Actionのtypeの命名指針は大事。
「だれが、何を、どうした」
が、わかるような命名に決めた。
e.g. USER_NEWS_ARTICLE_TOUCHED
e.g. SYSTEM_APP_LAUNCHED
123
![Page 124: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/124.jpg)
Redux Saga
「Reducer Action」
Reducerへ渡すための
State更新指示をするAction
124
![Page 125: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/125.jpg)
Redux Saga
こちらもActionの命名指針は大事。
「Sagaが、何を、どうした」
が、わかるような命名に決めた。
接頭辞は REDUCER_とした。
e.g. REDUCER_VIEW_NEWS_FETCH_DONE
125
![Page 126: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/126.jpg)
Redux Saga
ほかに、役割ごとにレイヤー化
データフローの流れを決める
126
![Page 127: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/127.jpg)
127
ReduxSaga
Ajax Model
UserAction
UserInterface
DataAccess
DataIntegration
UserEvent
DataStore
StateMachine
Reducer
Web API XML-RPC Static JSON Database
Ajax
ReduxSaga
Layer Model / with React, Redux, Redux Saga, External API
StateState
Ajax
ReduxContainer
ReduxProvider
ReactComponent
HTTP HTTP HTTP Sqlite/webSQL/localStorage
SystemAction
ReduxSaga
StateEvent
ReducerAction
![Page 128: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/128.jpg)
128
Redux
Store
State
Action
Dispatch
Index.js
Reducer
Action
React
Provider
data
process
component
Action
App
Initial News Product
Action
Dispatch
Action
Dispatch
useroperation
initializecompletion
Saga (Redux Middleware)
Saga(root)
useroperation
take
Saga(thread)
External API
WebAPI
XML-RPC
StaticJSON
fork
fetch / HTTPAjaxcall
Dispatch
Saga(thread)
Ajax
put
Modelcall
fork
fetch / HTTP
selectは参照しない。(state(=View構造)に依存するから)(でも通信中状態の判定では必要かも)
put
Internal API
Storage
Action
operation
fetch
Dispatch
Action
凡例
transfered
![Page 129: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/129.jpg)
Redux Saga
という感じの
ガイドラインに落ち着く。
129
![Page 130: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/130.jpg)
まとめ
130
![Page 131: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/131.jpg)
まとめ
React + Redux + Redux Saga
学習コストはちょっと高いかも。
慣れてしまえばコードは追いやすい。
メンテも引き継ぎもしやすい。
チームでスケールして戦える。
131
![Page 132: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/132.jpg)
まとめ
レイヤー構造やデータフローを常に
意識しながら設計する必要がある。
設計の難易度はちょっと高めかも。
小さい規模の案件には向かないかも。
長期メンテのある案件には向いてそう。
132
![Page 133: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/133.jpg)
Appendix
133
![Page 134: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/134.jpg)
React Fiber
React Fiberに期待したい気持ち(Reactコアアルゴリズムの再実装)
60FPS出せたり、アニメーションの実装がしやすくなるといいな…
https://github.com/acdlite/react-fiber-architecture
134
![Page 135: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/135.jpg)
React Fiber
Andrew Clark: What's Next for React — ReactNext 2016
https://www.youtube.com/watch?v=aV1271hd9ew
135
![Page 136: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/136.jpg)
React Fiber
POSTDのこの記事もよかったです
http://postd.cc/react-fiber-architecture/
136
![Page 137: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/137.jpg)
React Fiber
https://github.com/facebook/react/issues/8854
(ちなみに、React 16からFiberがデフォ搭載になるみたい)
137
![Page 138: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/138.jpg)
FLUX Standard Action
Actionのデータ構造の標準
https://github.com/acdlite/flux-standard-action
138
An action MUST
- be a plain JavaScript object.- have a type property.
An action MAY
- have an error property.- have a payload property.- have a meta property.
![Page 139: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/139.jpg)
FLUX Standard Action
サンプル
139
{type: 'ADD_TODO',payload: {text: 'Do something.'
}}
![Page 140: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/140.jpg)
FLUX Standard Action
ガイドラインに従うことで、コードのクオリティが均一になるので、積極的に合わせていきましょう。
140
![Page 141: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/141.jpg)
おしまい
141
![Page 142: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/142.jpg)
おしまい
ご清聴ありがとうございました。
142
![Page 143: React + FLUX + Redux + Redux Saga のお話](https://reader033.fdocument.pub/reader033/viewer/2022052116/58ee8bb81a28abe5528b4613/html5/thumbnails/143.jpg)
おしまい
143