React + FLUX + Redux + Redux Saga のお話
?Download as PPTX, PDF?
20 likes?34,406 views
ARCANA Meetup #23 の「React + FLUX + Redux + Redux Saga のお話」 のスライドです。 http://www.s-arcana.co.jp/blog/2017/04/06/3627
![自己紹介
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](https://image.slidesharecdn.com/20170323-reactfluxreduxreduxsaga-170324033405/85/React-FLUX-Redux-Redux-Saga-2-320.jpg)
React + FLUX + Redux + Redux Saga のお話
- 1. React + FLUX + Redux + ReduxSaga のお話 2017/03/23(木) ARCANA Meetup #23 よしだ しんいちろう
- 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. 自己紹介 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
- 5. はじめに 5
- 6. はじめに 社内勉強会 #21でお話しした 『実践 Redux Saga』 というスライドの圧縮版です。 ご了承を…！ 6
- 7. はじめに ほんだい 7
- 11. 技術要素 11
- 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
- 16. jQuery 16
- 28. jQuery 28 HTML
- 32. jQuery 32 HTML HTML HTML HTML HTML 元の状態は… ？？？
- 36. React 36
- 38. React Model, View, Controller の Viewだけ担当みたいな役割 38
- 42. React class HelloMessage extends React.Component { render() { return <div>Hello Jane</div>; } } ReactDOM.render(<HelloMessage />, mountNode); 42 Component <div>Hello Jane</div> HTML
- 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
- 59. Component Props React 59 HTML State Reactの場合 DOMの構造は、Reactが変更を 自動的に計算し、差分だけ更新する （Virtual DOM） JSX
- 64. FLUX 64
- 66. FLUX Hacker Way: Rethinking Web App Development at Facebook https://www.youtube.com/watch?v=nYkdrAPrdcw 66
- 71. FLUX FLUXの場合 71
- 78. Redux 78
- 80. Redux http://elm-lang.org/ (action, state) => state Elm“updaters”≒ Redux“reducers” このあたりの考え方がおなじ。 80
- 90. Store Redux 90 Reducer View (Container) Component Props JSX ActionActionAction State ちょっと分解してみます
- 92. Redux 92 Component Props JSX ActionActionAction Container Store Reducer State ViewをContainerとします
- 102. Redux Saga 102
- 106. Redux Saga 106 Action Saga Saga 外部API Saga DB Saga 外部API 呼出し方は2通り ?Fork: 非同期で呼出し ?Call: 同期的に呼出し Fork Fork Call
- 116. Redux Saga Actionを2種類で分けて考える 「System&User Action」 「Reducer Action」 116
- 119. Redux Saga 119 Container Action Action State Component JSX Saga 外部API Action Reducer ユーザー操作のActionは直接Reducerへ渡さない
- 121. Redux Saga 121 Container Action State Component JSX Saga 外部API Action Reducer User Action Reducer Action
- 123. Redux Saga Actionのtypeの命名指針は大事。 「だれが、何を、どうした」 が、わかるような命名に決めた。 e.g. USER_NEWS_ARTICLE_TOUCHED e.g. SYSTEM_APP_LAUNCHED 123
- 125. Redux Saga こちらもActionの命名指針は大事。 「Sagaが、何を、どうした」 が、わかるような命名に決めた。 接頭辞は REDUCER_ とした。 e.g. REDUCER_VIEW_NEWS_FETCH_DONE 125
- 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 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
- 130. まとめ 130
- 131. まとめ React + Redux + Redux Saga 学習コストはちょっと高いかも。 慣れてしまえばコードは追いやすい。 メンテも引き継ぎもしやすい。 チームでスケールして戦える。 131
- 132. まとめ レイヤー構造やデータフローを常に 意識しながら設計する必要がある。 設計の難易度はちょっと高めかも。 小さい規模の案件には向かないかも。 長期メンテのある案件には向いてそう。 132
- 133. Appendix 133
- 134. React Fiber React Fiber に期待したい気持ち （Reactコアアルゴリズムの再実装） 60FPS出せたり、アニメーションの実装が しやすくなるといいな… https://github.com/acdlite/react-fiber-architecture 134
- 135. React Fiber Andrew Clark: What's Next for React — ReactNext 2016 https://www.youtube.com/watch?v=aV1271hd9ew 135
- 137. React Fiber https://github.com/facebook/react/issues/8854 （ちなみに、React 16からFiberがデフォ搭載になるみたい） 137
- 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. FLUX Standard Action サンプル 139 { type: 'ADD_TODO', payload: { text: 'Do something.' } }
- 141. おしまい 141
- 143. おしまい 143