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

React + FLUX + Redux + Redux Saga のお話

11,172 views

Published on

ARCANA Meetup #23 の「React + FLUX + Redux + Redux Saga のお話」 のスライドです。 http://www.s-arcana.co.jp/blog/2017/04/06/3627

Published in: Technology
  • Be the first to comment

React + FLUX + Redux + Redux Saga のお話

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

×