実践 Redux Saga -Practical Redux Saga-
•Download as PPTX, PDF•
11 likes•10,330 views
第21回スタジオ･アルカナ社内勉強会のスライドです。 jQueyから始まり、React、FLUX、Redux、Redux Sagaの概要をやんわりと。
![自己紹介
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](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 実践 Redux Saga -Practical Redux Saga-
Similar to 実践 Redux Saga -Practical Redux Saga- (20)
More from Shinichiro Yoshida
More from Shinichiro Yoshida (20)
Recently uploaded
Recently uploaded (9)
実践 Redux Saga -Practical Redux Saga-
- 1. 実践 Redux Saga -Practical Redux Saga- 2017/01/27(金) スタジオ･アルカナ 社内勉強会 #21 よしだ しんいちろう
- 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. 自己紹介 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
- 6. はじめに 6
- 8. はじめに ほんだい 8
- 12. 技術要素 12
- 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
- 17. jQuery 17
- 29. jQuery 29 HTML
- 33. jQuery 33 HTML HTML HTML HTML HTML 元の状態は… ？？？
- 37. React 37
- 39. React Model, View, Controller の Viewだけ担当みたいな役割 39
- 43. React class HelloMessage extends React.Component { render() { return <div>Hello Jane</div>; } } ReactDOM.render(<HelloMessage />, mountNode); 43 Component <div>Hello Jane</div> HTML
- 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
- 60. Component Props React 60 HTML State Reactの場合 DOMの構造は、Reactが変更を 自動的に計算し、差分だけ更新する （Virtual DOM） JSX
- 65. FLUX 65
- 67. FLUX Hacker Way: Rethinking Web App Development at Facebook https://www.youtube.com/watch?v=nYkdrAPrdcw 67
- 72. FLUX FLUXの場合 72
- 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を保持している。
- 83. FLUX import {Dispatcher} from 'flux'; export default new Dispatcher(); 83 HelloDispatcher Fluxが提供してるDispatcher
- 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を受け取り、ユーザー操作のタイプに 応じて、値を返却する。
- 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
- 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. Redux 90
- 92. Redux http://elm-lang.org/ (action, state) => state Elm“updaters”≒ Redux“reducers” このあたりの考え方がおなじ。 92
- 99. Redux 99 HTML Reducer View (Container) Component Props JSX ActionActionAction State Dispatcherはない。
- 100. Store Redux 100 Reducer View (Container) Component Props JSX ActionActionAction State Storeはひとつだけ。
- 101. Redux 101 View (Container) Component Props JSX ActionActionAction もうちょっと分解してみると、 Store Reducer State
- 107. Redux 107 Provider ActionActionAction Container Store Reducer State Component Props JSX Middleware
- 111. Redux Saga 111
- 113. Redux Saga 113 Provider Action Action Container Reducer State Component Props JSX Saga 外部API Action 非同期処理
- 115. Redux Saga 115 Action Saga Saga 外部API Saga DB Saga 外部API 呼出し方は2通り ・Fork: 非同期で呼出し ・Call: 同期的に呼出し Fork Fork Call
- 125. Redux Saga Actionを2種類で分けて考える 「System&User Action」 「Reducer Action」 125
- 127. Redux Saga 127 Provider Action Action Container State Component Props JSX Saga 外部API Action Reducer
- 128. Redux Saga 128 Provider Action Action Container State Component Props JSX Saga 外部API Action Reducer ユーザー操作のActionは直接Reducerへ渡さない
- 129. Redux Saga 129 Provider Action Container State Component Props JSX Saga 外部API Action Reducer 単一のデータフローを維持 （副作用ではなく、主作用として考える）
- 130. Redux Saga 130 Provider Action Container State Component Props JSX Saga 外部API Action Reducer User Action Reducer Action
- 132. Redux Saga Actionのtypeの命名指針は大事。 「だれが、何を、どうした」 が、わかるような命名に決めた。 e.g. USER_NEWS_ARTICLE_TOUCHED e.g. SYSTEM_APP_LAUNCHED 132
- 134. Redux Saga こちらもActionの命名指針は大事。 「Sagaが、何を、どうした」 が、わかるような命名に決めた。 e.g. REDUCER_VIEW_NEWS_FETCH_DONE 134
- 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 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
- 139. まとめ 139
- 140. まとめ React + Redux + Redux Saga 学習コストはちょっと高いかも。 慣れてしまえばコードは追いやすい。 メンテも引き継ぎもしやすい。 チームでスケールして戦える。 140
- 141. まとめ レイヤー構造やデータフローを常に 意識しながら設計する必要がある。 設計の難易度はちょっと高めかも。 小さい規模の案件には向かないかも。 長期メンテのある案件には向いてそう。 141
- 142. Appendix 142
- 143. React Fiber React Fiber に期待したい気持ち （Reactコアアルゴリズムの再実装） 60FPS出せたり、アニメーションの実装が しやすくなるといいな… https://github.com/acdlite/react-fiber-architecture （ちなみに、React 16からFiberがデフォルトになるみたい） 143
- 144. React Fiber Andrew Clark: What's Next for React — ReactNext 2016 https://www.youtube.com/watch?v=aV1271hd9ew 144
- 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. FLUX Standard Action サンプル 147 { type: 'ADD_TODO', payload: { text: 'Do something.' } }
- 149. おしまい 149
- 151. おしまい 151