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.
実践 Redux Saga
-Practical Redux Saga-
2017/01/27(金)
スタジオ・アルカナ 社内勉強会 #21
よしだ しんいちろう
自己紹介
name: “よしだ しんいちろう”
age: 32
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年頃...
自己紹介
と、フロントエンドやってる人っぽく書いてみましたが、
本業はディレクション/マネジメントがほとんど。
趣味がてら、IPAプロジェクトマネージャ、ネットワークスペ
シャリスト、データベーススペシャリスト、情報セキュリティス
ペシャリスト...
自己紹介
なお、このスライドのトンマナは、
スーパーナントカメーカーに影響を受けています。
hico00氏に表紙をみせたら、神速で
こういうコメントを送ってきましたが、それではない。
(プリンはファミマの「くちどけ贅沢プリン」が好きです。くださ...
はじめに
6
はじめに
あけましておめでとうございます。
2017年もよろしくお願いします。
7
はじめに
ほんだい
8
はじめに
プロダクションの案件で
redux-saga を
使ってみたということで、
そのお話をしてみます。
9
はじめに
Redux Sagaを使うにあたり、
どのような指針で設計をしたか?
なぜそのような指針にしたか?
その結果、何が見えてきたか?
といった感じの内容です。
10
はじめに
設計思想や考え方の話が多く、
抽象的なクダリも多いですが、
ご承知おきください。
あと、Redux Sagaまでの
前置きの話も長いです。
11
技術要素
12
技術要素
React , Redux , Redux Saga , Apache
Cordova , Onsen UI , Sqlite , WebSQL ,
WebAPI(Ajax) , Webpack , Babel(stage-0),
E...
今日お話しすること
14
今日お話しすること
jQuery
React
FLUX
Redux
Redux Saga
15
今日お話しすること
順番にいってみよう
16
jQuery
17
jQuery
jQueryはみんな知ってますね?
18
jQuery
画面の状態を変更するときは、
DOMを直接操作します。
19
jQuery
20
HTML HTML
HTMLのDOMを直接操作する
jQuery
シンプルな構成のサイトで
使う分には、全く問題ない。
21
jQuery
静的なHTMLのサイトで、
ちょっとアコーディオン。
ちょっとインタラクション。
ちょっとタブ切り替え。
ちょっと外部APIを呼び出す。
など
22
jQuery
しかし、
DOMの変更を多用すると、
どこで何が起きているか
わからなくなる。
23
jQuery
外部からデータを取得して、
HTMLテンプレート定義して、
テンプレートの文字列を置換して、
画面に結果のHTMLを表示して、
24
jQuery
.append()…
.appendTo()…
.addClass()…
.attr()…
…???
25
jQuery
その間にユーザーが別の
操作をしたらどうなる?
外部からデータが
取得できなかったらどうなる?
データ呼出しのボタンを
連打されたらどうなる?
26
jQuery
DOM操作するタイミングで、
既にDOMの構造が
変化していたらどうなる?
CSSクラス名を付けたり消したり
するタイミングが重複したらどうなる?
27
jQuery
いろんな所でイベントリスナー
監視しまくりのコードを
自分が引き継いだら理解できる?
28
jQuery
29
HTML
jQuery
30
HTML HTML
jQuery
31
HTML HTML HTML
jQuery
32
HTML HTML HTML
HTML
jQuery
33
HTML HTML HTML
HTML HTML
元の状態は…
???
jQuery
34
※出典:山口県周南市徳山動物園のツヨシくん
jQuery
そこで、
Reactのでばん
35
jQuery
Reactを使うことで、
いくつかの課題を解決できます
36
React
37
React
Reactは、
UIを構築するためのライブラリ
38
React
Model, View, Controller の
Viewだけ担当みたいな役割
39
React
Component という単位の
パーツを組み合わせて
HTMLのDOM構造を構築する
40
React
Componentのクラスの中で
JSXというHTMLっぽい記法で
DOMの構造を定義できる
41
React
42
HTMLComponent
JSX
React
class HelloMessage extends React.Component {
render() {
return <div>Hello Jane</div>;
}
}
ReactDOM.render(<HelloMess...
React
HTMLの属性と似たように
Propsという属性も定義できる。
44
React
45
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とよばれる状態を
保持することもできる
47
React
48
HTMLComponent
State
Stateは、そのComponentの内部だけで操作できる値
オブジェクト指向のprivateプロパティのようなイメージ
JSX
React
画面のDOMの構造は
“Props”と“State”
の状態によって、決定する
49
React
50
HTMLComponent
State
Props
JSX
React
jQueryの場合だと
51
React
52
HTML HTML
jQueryの場合
HTMLのDOMを直接操作する
React
Reactの場合だと
53
Component
React
54
HTML
Reactの場合
JSX
Component
Props
React
55
HTML
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
Component
Props
React
59
HTML
State
Reactの場合
JSXとStateとPropsによって、
HTMLのDOM構造が決定する
JSX
Component
Props
React
60
HTML
State
Reactの場合
DOMの構造は、Reactが変更を
自動的に計算し、差分だけ更新する
(Virtual DOM)
JSX
React
Component は部品ごとに
細かく分けてネストもできる
61
React
62
HTMLComponent
Component
Component
Component
子のComponentにはPropsで値を渡すことができる
オブジェクト指向でいうと別クラスに委譲して引数で値を渡すイメージ
React
63
Component
Component Component
Component Component
Componentはツリー上の構造にすることもできて、
親から子へのデータはPropsで渡していく
React
64
Component
Component Component
Component Component
Callback
Callback
子から親へのデータは、コールバック関数を経由してやり取りする
FLUX
65
FLUX
FLUXは、
アプリケーション構造の
アーキテクチャ
66
FLUX
Hacker Way: Rethinking Web App Development at Facebook
https://www.youtube.com/watch?v=nYkdrAPrdcw
67
FLUX
MVCの場合
※サーバーサイドのMVCではなく、
GUIのMVC (Smalltalk MVC) ね。
68
FLUX
構造が複雑になるとスケールしない。
(ModelとViewのデータフローが双方向で、
コードの影響が予測しにくい)
69
FLUX
この場合も子と親のデータフローが双方向で、
コードの影響が予測しにくい。
70
Component
Component Component
Component Component
Callback
Callback
State
更新
FLUX
そこで、FLUXのでばん
71
FLUX
FLUXの場合
72
FLUX
データフローを単方向にすることで、
コードの影響を予測しやすくする
73
FLUX
74
Action
Dispatcher
Store
View
アプリケーションに必要なデータを保持する領域。
データの保持と、データを操作するロジックを持つ。
Dispatcherにより、メソッドが呼び出される。
Storeの状態に...
FLUX
75
HTMLComponent
State
Props
JSX
Reactのイメージがこうだとしたら、
FLUX
76
HTMLComponent
State
Props
JSX
StateがComponentの外に出て、
FLUX
77
HTML
Store
View
(Container)
Component
State
Props
JSX
それぞれがStoreとViewという位置づけに。
FLUX
78
HTML
Dispatcher
View
(Container)
Component
Props
JSX
ActionActionAction
StoreStoreStore
State
そして、こんなデータフローに。
FLUX
コードを見てみましょう
79
FLUX
80
HTML
Dispatcher
View
(Container)
Component
Props
JSX
ActionActionAction
StoreStoreStore
State
FLUX
import HelloDispatcher from './HelloDispatcher';
const HelloActions = {
changeName(name) {
HelloDispatcher.dispatch({...
FLUX
82
HTML
Dispatcher
View
(Container)
Component
Props
JSX
ActionActionAction
StoreStoreStore
State
FLUX
import {Dispatcher} from 'flux';
export default new Dispatcher();
83
HelloDispatcher
Fluxが提供してるDispatcher
FLUX
84
HTML
Dispatcher
View
(Container)
Component
Props
JSX
ActionActionAction
StoreStoreStore
State
FLUX
import {ReduceStore} from 'flux/utils';
import HelloDispatcher from './HelloDispatcher';
class HelloStore extends Red...
FLUX
86
HTML
Dispatcher
View
(Container)
Component
Props
JSX
ActionActionAction
StoreStoreStore
State
FLUX
import {Container} from 'flux/utils';
import HelloStore from './HelloStore';
import HelloComponent from './HelloCompo...
FLUX
88
HTML
Dispatcher
View
(Container)
Component
Props
JSX
ActionActionAction
StoreStoreStore
State
FLUX
import React from 'react';
import HelloActions from ‘./HelloActions';
class HelloComponent extends React.Component {
...
Redux
90
Redux
Reduxは、
FLUXとElmArchitectureに
影響を受けた
ステート管理コンテナ
91
Redux
http://elm-lang.org/
(action, state) => state
Elm“updaters”≒ Redux“reducers”
このあたりの考え方がおなじ。
92
Redux
Reduxは、
FLUXと似ています。
93
Redux
Reduxは制約を強めて、
次のような条件をつきます
94
Redux
「Storeは、ひとつだけ」
「Stateは、原則、読み取り専用」
「状態の変化は、Reducer経由で」
95
Redux
Dispatcherという概念もない
96
Redux
97
Action
Reducer
State アプリケーションに必要なデータを保持する領域。
ボタンを押す、といったようなユーザーの操作。
ユーザー操作を受け取って、新しいStateを返す。
(Actionを受け取って、Store...
Redux
98
HTML
Dispatcher
View
(Container)
Component
Props
JSX
ActionActionAction
StoreStoreStore
State
これはFLUXのときの図
Redux
99
HTML
Reducer
View
(Container)
Component
Props
JSX
ActionActionAction
State
Dispatcherはない。
Store
Redux
100
Reducer
View
(Container)
Component
Props
JSX
ActionActionAction
State
Storeはひとつだけ。
Redux
101
View
(Container)
Component
Props
JSX
ActionActionAction
もうちょっと分解してみると、
Store
Reducer
State
Redux
102
Provider
Component
Props
JSX
ActionActionAction
Container
Store
Reducer
State
こんな感じ
Redux
103
Provider
Component
Props
JSX
ActionActionAction
Container
Store
Reducer
State
Redux
FLUXとだいたい流れは似てますね?
104
Redux
Reduxの強み
Middleware
105
Redux
106
Provider
Component
Props
JSX
ActionActionAction
Container
Store
Reducer
State
Reduxには、
Middlewareという仕組みがあります
Redux
107
Provider
ActionActionAction Container
Store
Reducer
State
Component
Props
JSX
Middleware
Redux
Middlewareを使うことで
外部API呼び出しなどの
非同期処理の取り扱いができる
(副作用とか呼ばれてる)
108
Redux
109
Provider
ActionActionAction Container
Store
Reducer
State
Component
Props
JSX
Middleware外部API
Redux
Middlewareの中のひとつが、
Redux Saga
110
Redux Saga
111
Redux Saga
Actionを受け取って
任意のロジックを非同期で処理
112
Redux Saga
113
Provider
Action Action Container
Reducer
State
Component
Props
JSX
Saga
外部API
Action
非同期処理
Redux Saga
Sagaから、別のSagaを
呼び出すこともできる
114
Redux Saga
115
Action
Saga
Saga
外部API
Saga
DB
Saga
外部API
呼出し方は2通り
・Fork: 非同期で呼出し
・Call: 同期的に呼出し
Fork
Fork Call
Redux Saga
Actionを発行したり、
受け取ったりすることもできる
116
Redux Saga
117
Reducer
Saga
Action
Saga
Put
Take
Action
Put
Redux Saga
実際のところ、どう使うのか
118
Redux Saga
いろいろな組み合わせ方ができるので
人によって実装がバラバラになる
119
Redux Saga
ある程度のガイドラインを決めたい
120
Redux Saga
いろいろ模索してみた結果
121
Redux Saga
素晴らしい記事と出会う
122
Redux Saga
123
https://medium.com/@marcelschulze/using-react-native-with-redux-and-redux-saga-a-new-proposal-ba71f151546f
Redux Saga
ActionはすべてSagaを経由する
124
Redux Saga
Actionを2種類で分けて考える
「System&User Action」
「Reducer Action」
125
Redux Saga
どういうことかというと、
126
Redux Saga
127
Provider
Action Action Container
State
Component
Props
JSX
Saga
外部API
Action Reducer
Redux Saga
128
Provider
Action Action Container
State
Component
Props
JSX
Saga
外部API
Action Reducer
ユーザー操作のActionは直接Reduce...
Redux Saga
129
Provider
Action Container
State
Component
Props
JSX
Saga
外部API
Action Reducer
単一のデータフローを維持
(副作用ではなく、主作用として考...
Redux Saga
130
Provider
Action Container
State
Component
Props
JSX
Saga
外部API
Action Reducer
User Action
Reducer Action
Redux Saga
「System&User Action」
ユーザーが操作したアクション
or
システムから発生したアクション
131
Redux Saga
Actionのtypeの命名指針は大事。
「だれが、何を、どうした」
が、わかるような命名に決めた。
e.g. USER_NEWS_ARTICLE_TOUCHED
e.g. SYSTEM_APP_LAUNCHED
132
Redux Saga
「Reducer Action」
Reducerへ渡すための
State更新指示をするAction
133
Redux Saga
こちらもActionの命名指針は大事。
「Sagaが、何を、どうした」
が、わかるような命名に決めた。
e.g. REDUCER_VIEW_NEWS_FETCH_DONE
134
Redux Saga
ほかに、役割ごとにレイヤー化
データフローの流れを決める
135
136
Redux
Saga
Ajax Model
User
Action
User
Interface
Data
Access
Data
Integration
User
Event
Data
Store
State
Machine
Redu...
137
Redux
Store
State
Action
Dispatch
Index.js
Reducer
Action
React
Provider
data
process
component
Action
App
Initial New...
Redux Saga
という感じの
ガイドラインに落ち着く。
138
まとめ
139
まとめ
React + Redux + Redux Saga
学習コストはちょっと高いかも。
慣れてしまえばコードは追いやすい。
メンテも引き継ぎもしやすい。
チームでスケールして戦える。
140
まとめ
レイヤー構造やデータフローを常に
意識しながら設計する必要がある。
設計の難易度はちょっと高めかも。
小さい規模の案件には向かないかも。
長期メンテのある案件には向いてそう。
141
Appendix
142
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
144
React Fiber
POSTDのこの記事もよかったです
http://postd.cc/react-fiber-architecture/
145
FLUX Standard Action
Actionのデータ構造の標準
https://github.com/acdlite/flux-standard-action
146
An action MUST
- be a plain JavaS...
FLUX Standard Action
サンプル
147
{
type: 'ADD_TODO',
payload: {
text: 'Do something.'
}
}
FLUX Standard Action
ガイドラインに従うことで、
コードのクオリティが均一になるので、
積極的に合わせていきましょう。
148
おしまい
149
おしまい
ご清聴ありがとうございました。
150
おしまい
151
Upcoming SlideShare
Loading in …5
×

実践 Redux Saga -Practical Redux Saga-

4,616 views

Published on

第21回スタジオ・アルカナ社内勉強会のスライドです。
jQueyから始まり、React、FLUX、Redux、Redux Sagaの概要をやんわりと。

Published in: Technology
  • Be the first to comment

実践 Redux Saga -Practical Redux Saga-

  1. 1. 実践 Redux Saga -Practical Redux Saga- 2017/01/27(金) スタジオ・アルカナ 社内勉強会 #21 よしだ しんいちろう
  2. 2. 自己紹介 name: “よしだ しんいちろう” age: 32 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 1(2014年~) React.js(2014年~) なんぞを一通り使ってみたことはある程度のおっさんです。 3
  4. 4. 自己紹介 と、フロントエンドやってる人っぽく書いてみましたが、 本業はディレクション/マネジメントがほとんど。 趣味がてら、IPAプロジェクトマネージャ、ネットワークスペ シャリスト、データベーススペシャリスト、情報セキュリティス ペシャリスト、アプリケーションエンジニアなど。 守備範囲は広めで生きていきたい。 4
  5. 5. 自己紹介 なお、このスライドのトンマナは、 スーパーナントカメーカーに影響を受けています。 hico00氏に表紙をみせたら、神速で こういうコメントを送ってきましたが、それではない。 (プリンはファミマの「くちどけ贅沢プリン」が好きです。ください。) 5
  6. 6. はじめに 6
  7. 7. はじめに あけましておめでとうございます。 2017年もよろしくお願いします。 7
  8. 8. はじめに ほんだい 8
  9. 9. はじめに プロダクションの案件で redux-saga を 使ってみたということで、 そのお話をしてみます。 9
  10. 10. はじめに Redux Sagaを使うにあたり、 どのような指針で設計をしたか? なぜそのような指針にしたか? その結果、何が見えてきたか? といった感じの内容です。 10
  11. 11. はじめに 設計思想や考え方の話が多く、 抽象的なクダリも多いですが、 ご承知おきください。 あと、Redux Sagaまでの 前置きの話も長いです。 11
  12. 12. 技術要素 12
  13. 13. 技術要素 React , Redux , Redux Saga , Apache Cordova , Onsen UI , Sqlite , WebSQL , WebAPI(Ajax) , Webpack , Babel(stage-0), ES6 , Generator(ES6) , Promise(ES6), Gulp, Sass あたりの技術を使ってます。 今日のお話しは、赤字の部分だけ。 13
  14. 14. 今日お話しすること 14
  15. 15. 今日お話しすること jQuery React FLUX Redux Redux Saga 15
  16. 16. 今日お話しすること 順番にいってみよう 16
  17. 17. jQuery 17
  18. 18. jQuery jQueryはみんな知ってますね? 18
  19. 19. jQuery 画面の状態を変更するときは、 DOMを直接操作します。 19
  20. 20. jQuery 20 HTML HTML HTMLのDOMを直接操作する
  21. 21. jQuery シンプルな構成のサイトで 使う分には、全く問題ない。 21
  22. 22. jQuery 静的なHTMLのサイトで、 ちょっとアコーディオン。 ちょっとインタラクション。 ちょっとタブ切り替え。 ちょっと外部APIを呼び出す。 など 22
  23. 23. jQuery しかし、 DOMの変更を多用すると、 どこで何が起きているか わからなくなる。 23
  24. 24. jQuery 外部からデータを取得して、 HTMLテンプレート定義して、 テンプレートの文字列を置換して、 画面に結果のHTMLを表示して、 24
  25. 25. jQuery .append()… .appendTo()… .addClass()… .attr()… …??? 25
  26. 26. jQuery その間にユーザーが別の 操作をしたらどうなる? 外部からデータが 取得できなかったらどうなる? データ呼出しのボタンを 連打されたらどうなる? 26
  27. 27. jQuery DOM操作するタイミングで、 既にDOMの構造が 変化していたらどうなる? CSSクラス名を付けたり消したり するタイミングが重複したらどうなる? 27
  28. 28. jQuery いろんな所でイベントリスナー 監視しまくりのコードを 自分が引き継いだら理解できる? 28
  29. 29. jQuery 29 HTML
  30. 30. jQuery 30 HTML HTML
  31. 31. jQuery 31 HTML HTML HTML
  32. 32. jQuery 32 HTML HTML HTML HTML
  33. 33. jQuery 33 HTML HTML HTML HTML HTML 元の状態は… ???
  34. 34. jQuery 34 ※出典:山口県周南市徳山動物園のツヨシくん
  35. 35. jQuery そこで、 Reactのでばん 35
  36. 36. jQuery Reactを使うことで、 いくつかの課題を解決できます 36
  37. 37. React 37
  38. 38. React Reactは、 UIを構築するためのライブラリ 38
  39. 39. React Model, View, Controller の Viewだけ担当みたいな役割 39
  40. 40. React Component という単位の パーツを組み合わせて HTMLのDOM構造を構築する 40
  41. 41. React Componentのクラスの中で JSXというHTMLっぽい記法で DOMの構造を定義できる 41
  42. 42. React 42 HTMLComponent JSX
  43. 43. React class HelloMessage extends React.Component { render() { return <div>Hello Jane</div>; } } ReactDOM.render(<HelloMessage />, mountNode); 43 Component <div>Hello Jane</div> HTML
  44. 44. React HTMLの属性と似たように Propsという属性も定義できる。 44
  45. 45. React 45 HTMLComponent Props PropsはComponentが外部から受け取ることができる値 オブジェクト指向でいうとsetterのようなイメージ JSX
  46. 46. React class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}</div>; } } ReactDOM.render(<HelloMessage name="Jane" />, mountNode); 46 Component <div>Hello Jane</div> HTML
  47. 47. React Component は Propsのほかに、 Stateとよばれる状態を 保持することもできる 47
  48. 48. React 48 HTMLComponent State Stateは、そのComponentの内部だけで操作できる値 オブジェクト指向のprivateプロパティのようなイメージ JSX
  49. 49. React 画面のDOMの構造は “Props”と“State” の状態によって、決定する 49
  50. 50. React 50 HTMLComponent State Props JSX
  51. 51. React jQueryの場合だと 51
  52. 52. React 52 HTML HTML jQueryの場合 HTMLのDOMを直接操作する
  53. 53. React Reactの場合だと 53
  54. 54. Component React 54 HTML Reactの場合 JSX
  55. 55. Component Props React 55 HTML 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
  59. 59. Component Props React 59 HTML State Reactの場合 JSXとStateとPropsによって、 HTMLのDOM構造が決定する JSX
  60. 60. Component Props React 60 HTML State Reactの場合 DOMの構造は、Reactが変更を 自動的に計算し、差分だけ更新する (Virtual DOM) JSX
  61. 61. React Component は部品ごとに 細かく分けてネストもできる 61
  62. 62. React 62 HTMLComponent Component Component Component 子のComponentにはPropsで値を渡すことができる オブジェクト指向でいうと別クラスに委譲して引数で値を渡すイメージ
  63. 63. React 63 Component Component Component Component Component Componentはツリー上の構造にすることもできて、 親から子へのデータはPropsで渡していく
  64. 64. React 64 Component Component Component Component Component Callback Callback 子から親へのデータは、コールバック関数を経由してやり取りする
  65. 65. FLUX 65
  66. 66. FLUX FLUXは、 アプリケーション構造の アーキテクチャ 66
  67. 67. FLUX Hacker Way: Rethinking Web App Development at Facebook https://www.youtube.com/watch?v=nYkdrAPrdcw 67
  68. 68. FLUX MVCの場合 ※サーバーサイドのMVCではなく、 GUIのMVC (Smalltalk MVC) ね。 68
  69. 69. FLUX 構造が複雑になるとスケールしない。 (ModelとViewのデータフローが双方向で、 コードの影響が予測しにくい) 69
  70. 70. FLUX この場合も子と親のデータフローが双方向で、 コードの影響が予測しにくい。 70 Component Component Component Component Component Callback Callback State 更新
  71. 71. FLUX そこで、FLUXのでばん 71
  72. 72. FLUX FLUXの場合 72
  73. 73. FLUX データフローを単方向にすることで、 コードの影響を予測しやすくする 73
  74. 74. FLUX 74 Action Dispatcher Store View アプリケーションに必要なデータを保持する領域。 データの保持と、データを操作するロジックを持つ。 Dispatcherにより、メソッドが呼び出される。 Storeの状態によって、描画する画面が決定する。 ボタンを押す、といったようなユーザーの操作。 ユーザー操作を受け取って、Storeのメソッドを呼ぶ。 (Actionを受け取って、Storeに指示を送る。)
  75. 75. FLUX 75 HTMLComponent State Props JSX Reactのイメージがこうだとしたら、
  76. 76. FLUX 76 HTMLComponent State Props JSX StateがComponentの外に出て、
  77. 77. FLUX 77 HTML Store View (Container) Component State Props JSX それぞれがStoreとViewという位置づけに。
  78. 78. FLUX 78 HTML Dispatcher View (Container) Component Props JSX ActionActionAction StoreStoreStore State そして、こんなデータフローに。
  79. 79. FLUX コードを見てみましょう 79
  80. 80. FLUX 80 HTML Dispatcher View (Container) Component Props JSX ActionActionAction StoreStoreStore State
  81. 81. FLUX import HelloDispatcher from './HelloDispatcher'; const HelloActions = { changeName(name) { HelloDispatcher.dispatch({ type: ‘CHANGE_NAME’, name, }); } }; export default HelloActions; 81 HelloAction ユーザーがHelloボタンを押したときに呼ばれる。 パラメータでnameを受け取っている。 Storeへ渡されるActionのオブジェクト。 typeとnameを保持している。
  82. 82. FLUX 82 HTML Dispatcher View (Container) Component Props JSX ActionActionAction StoreStoreStore State
  83. 83. FLUX import {Dispatcher} from 'flux'; export default new Dispatcher(); 83 HelloDispatcher Fluxが提供してるDispatcher
  84. 84. FLUX 84 HTML Dispatcher View (Container) Component Props JSX ActionActionAction StoreStoreStore State
  85. 85. FLUX import {ReduceStore} from 'flux/utils'; import HelloDispatcher from './HelloDispatcher'; class HelloStore extends ReduceStore { getInitialState() { return 'Jane'; } reduce(state, action) { switch (action.type) { case ‘CHANGE_NAME': return action.name; default: return state; } } } export default new HelloStore(HelloDispatcher); 85 HelloStore Actionを受け取り、ユーザー操作のタイプに 応じて、値を返却する。
  86. 86. FLUX 86 HTML Dispatcher View (Container) Component Props JSX ActionActionAction StoreStoreStore State
  87. 87. FLUX import {Container} from 'flux/utils'; import HelloStore from './HelloStore'; import HelloComponent from './HelloComponent'; class HelloContainer extends Component { static getStores() { return [HelloStore]; } static calculateState(prevState) { return { name: HelloStore.getState(), }; } render() { return <HelloComponent name={this.state.name} />; } } const AppContainer = Container.create(HelloContainer); ReactDOM.render(<AppContainer />, mountNode); 87 HelloContainer
  88. 88. FLUX 88 HTML Dispatcher View (Container) Component Props JSX ActionActionAction StoreStoreStore State
  89. 89. FLUX import React from 'react'; import HelloActions from ‘./HelloActions'; class HelloComponent extends React.Component { handleChange(event) { HelloActions.changeName(event.target.value); }; render() { return (<div> <div>Hello {this.props.name}</div> <input type=“text” onChange={this.handleChange} /> </div>); } } export default HelloComponent; 89 HelloComponent
  90. 90. Redux 90
  91. 91. Redux Reduxは、 FLUXとElmArchitectureに 影響を受けた ステート管理コンテナ 91
  92. 92. Redux http://elm-lang.org/ (action, state) => state Elm“updaters”≒ Redux“reducers” このあたりの考え方がおなじ。 92
  93. 93. Redux Reduxは、 FLUXと似ています。 93
  94. 94. Redux Reduxは制約を強めて、 次のような条件をつきます 94
  95. 95. Redux 「Storeは、ひとつだけ」 「Stateは、原則、読み取り専用」 「状態の変化は、Reducer経由で」 95
  96. 96. Redux Dispatcherという概念もない 96
  97. 97. Redux 97 Action Reducer State アプリケーションに必要なデータを保持する領域。 ボタンを押す、といったようなユーザーの操作。 ユーザー操作を受け取って、新しいStateを返す。 (Actionを受け取って、Storeに結果を渡す。)
  98. 98. Redux 98 HTML Dispatcher View (Container) Component Props JSX ActionActionAction StoreStoreStore State これはFLUXのときの図
  99. 99. Redux 99 HTML Reducer View (Container) Component Props JSX ActionActionAction State Dispatcherはない。
  100. 100. Store Redux 100 Reducer View (Container) Component Props JSX ActionActionAction State Storeはひとつだけ。
  101. 101. Redux 101 View (Container) Component Props JSX ActionActionAction もうちょっと分解してみると、 Store Reducer State
  102. 102. Redux 102 Provider Component Props JSX ActionActionAction Container Store Reducer State こんな感じ
  103. 103. Redux 103 Provider Component Props JSX ActionActionAction Container Store Reducer State
  104. 104. Redux FLUXとだいたい流れは似てますね? 104
  105. 105. Redux Reduxの強み Middleware 105
  106. 106. Redux 106 Provider Component Props JSX ActionActionAction Container Store Reducer State Reduxには、 Middlewareという仕組みがあります
  107. 107. Redux 107 Provider ActionActionAction Container Store Reducer State Component Props JSX Middleware
  108. 108. Redux Middlewareを使うことで 外部API呼び出しなどの 非同期処理の取り扱いができる (副作用とか呼ばれてる) 108
  109. 109. Redux 109 Provider ActionActionAction Container Store Reducer State Component Props JSX Middleware外部API
  110. 110. Redux Middlewareの中のひとつが、 Redux Saga 110
  111. 111. Redux Saga 111
  112. 112. Redux Saga Actionを受け取って 任意のロジックを非同期で処理 112
  113. 113. Redux Saga 113 Provider Action Action Container Reducer State Component Props JSX Saga 外部API Action 非同期処理
  114. 114. Redux Saga Sagaから、別のSagaを 呼び出すこともできる 114
  115. 115. Redux Saga 115 Action Saga Saga 外部API Saga DB Saga 外部API 呼出し方は2通り ・Fork: 非同期で呼出し ・Call: 同期的に呼出し Fork Fork Call
  116. 116. Redux Saga Actionを発行したり、 受け取ったりすることもできる 116
  117. 117. Redux Saga 117 Reducer Saga Action Saga Put Take Action Put
  118. 118. Redux Saga 実際のところ、どう使うのか 118
  119. 119. Redux Saga いろいろな組み合わせ方ができるので 人によって実装がバラバラになる 119
  120. 120. Redux Saga ある程度のガイドラインを決めたい 120
  121. 121. Redux Saga いろいろ模索してみた結果 121
  122. 122. Redux Saga 素晴らしい記事と出会う 122
  123. 123. Redux Saga 123 https://medium.com/@marcelschulze/using-react-native-with-redux-and-redux-saga-a-new-proposal-ba71f151546f
  124. 124. Redux Saga ActionはすべてSagaを経由する 124
  125. 125. Redux Saga Actionを2種類で分けて考える 「System&User Action」 「Reducer Action」 125
  126. 126. Redux Saga どういうことかというと、 126
  127. 127. Redux Saga 127 Provider Action Action Container State Component Props JSX Saga 外部API Action Reducer
  128. 128. Redux Saga 128 Provider Action Action Container State Component Props JSX Saga 外部API Action Reducer ユーザー操作のActionは直接Reducerへ渡さない
  129. 129. Redux Saga 129 Provider Action Container State Component Props JSX Saga 外部API Action Reducer 単一のデータフローを維持 (副作用ではなく、主作用として考える)
  130. 130. Redux Saga 130 Provider Action Container State Component Props JSX Saga 外部API Action Reducer User Action Reducer Action
  131. 131. Redux Saga 「System&User Action」 ユーザーが操作したアクション or システムから発生したアクション 131
  132. 132. Redux Saga Actionのtypeの命名指針は大事。 「だれが、何を、どうした」 が、わかるような命名に決めた。 e.g. USER_NEWS_ARTICLE_TOUCHED e.g. SYSTEM_APP_LAUNCHED 132
  133. 133. Redux Saga 「Reducer Action」 Reducerへ渡すための State更新指示をするAction 133
  134. 134. Redux Saga こちらもActionの命名指針は大事。 「Sagaが、何を、どうした」 が、わかるような命名に決めた。 e.g. REDUCER_VIEW_NEWS_FETCH_DONE 134
  135. 135. Redux Saga ほかに、役割ごとにレイヤー化 データフローの流れを決める 135
  136. 136. 136 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
  137. 137. 137 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
  138. 138. Redux Saga という感じの ガイドラインに落ち着く。 138
  139. 139. まとめ 139
  140. 140. まとめ React + Redux + Redux Saga 学習コストはちょっと高いかも。 慣れてしまえばコードは追いやすい。 メンテも引き継ぎもしやすい。 チームでスケールして戦える。 140
  141. 141. まとめ レイヤー構造やデータフローを常に 意識しながら設計する必要がある。 設計の難易度はちょっと高めかも。 小さい規模の案件には向かないかも。 長期メンテのある案件には向いてそう。 141
  142. 142. Appendix 142
  143. 143. React Fiber React Fiber に期待したい気持ち (Reactコアアルゴリズムの再実装) 60FPS出せたり、アニメーションの実装が しやすくなるといいな… https://github.com/acdlite/react-fiber-architecture (ちなみに、React 16からFiberがデフォルトになるみたい) 143
  144. 144. React Fiber Andrew Clark: What's Next for React — ReactNext 2016 https://www.youtube.com/watch?v=aV1271hd9ew 144
  145. 145. React Fiber POSTDのこの記事もよかったです http://postd.cc/react-fiber-architecture/ 145
  146. 146. FLUX Standard Action Actionのデータ構造の標準 https://github.com/acdlite/flux-standard-action 146 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.
  147. 147. FLUX Standard Action サンプル 147 { type: 'ADD_TODO', payload: { text: 'Do something.' } }
  148. 148. FLUX Standard Action ガイドラインに従うことで、 コードのクオリティが均一になるので、 積極的に合わせていきましょう。 148
  149. 149. おしまい 149
  150. 150. おしまい ご清聴ありがとうございました。 150
  151. 151. おしまい 151

×