More Related Content
Similar to 実践 Redux Saga -Practical Redux Saga- (20)
More from Shinichiro Yoshida (20)
実践 Redux Saga -Practical Redux Saga-
- 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
- 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
- 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
- 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を保持している。
- 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
- 140. まとめ
React + Redux + Redux Saga
学習コストはちょっと高いかも。
慣れてしまえばコードは追いやすい。
メンテも引き継ぎもしやすい。
チームでスケールして戦える。
140
- 143. React Fiber
React Fiber に期待したい気持ち
(Reactコアアルゴリズムの再実装)
60FPS出せたり、アニメーションの実装が
しやすくなるといいな…
https://github.com/acdlite/react-fiber-architecture
(ちなみに、React 16からFiberがデフォルトになるみたい)
143