ReactJS + alt(flux) を ES6 の記述でカウンターのサンプル
目的
Web+DB Press Vol.87 の Flux の記事 が素晴らしかったけど、サンプルコードが fluxxorだったので、 ES6 の class など使って書ける alt で書き換えてみた。
(fluxxor は ES6 未対応)
ちなみに雑誌のサンプルコードは こちらの「Emerging Web Technology研究室」
ファイル構成
.
├── dest
│ └── app.js
├── index.html
├── package.json
└── src
├── actions
│ └── counter_actions.js
├── alt.js
├── app.jsx
├── components
│ └── counter.jsx
└── stores
└── counter_store.js
package
reactify ではなく babelify を使う
{
"devDependencies": {
"alt": "^0.16.10",
"babelify": "^6.1.2",
"browserify": "^10.2.4",
"react": "^0.13.3",
"watchify": "^3.2.3"
},
"scripts": {
"watch": "watchify -t babelify src/app.jsx -o dest/app.js -v"
}
}
$ npm run watch
code
import React from 'react';
import CounterAppView from './components/counter.jsx';
React.render(
<CounterAppView />,
document.getElementById('app-container')
);
import Alt from 'alt';
var alt = new Alt();
export default alt;
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Flux</title>
</head>
<body>
<div id="app-container"></div>
<script src="dest/app.js"></script>
</body>
</html>
import alt from '../alt';
class CounterActions {
constructor() {
this.generateActions(
'plusCounter',
'minusCounter'
);
}
}
export default alt.createActions(CounterActions);
constructor
に generateActions
書くやり方と this.dispatch
を使うやり方などがあるみたい。コード見ておいた方がいいかも。
import React from 'react';
var AltContainer = require('alt/AltContainer');
import CounterActions from '../actions/counter_actions';
import CounterStore from '../stores/counter_store';
class CounterView extends React.Component {
render() {
return (
<div>
<span>count: {this.props.counter}</span>
<div>
<button onClick={CounterActions.plusCounter}>+1</button>
<button onClick={CounterActions.minusCounter}>-1</button>
</div>
</div>
);
}
}
class CounterAppView extends React.Component {
render() {
return (
<div>
<AltContainer store={CounterStore}>
<CounterView />
</AltContainer>
</div>
);
}
}
export default CounterAppView;
import alt from '../alt';
import CounterActions from '../actions/counter_actions';
class CounterStore {
constructor() {
this.counter = 0;
this.bindListeners({
handlePlusCounter: CounterActions.PLUS_COUNTER,
handleMinusCounter: CounterActions.MINUS_COUNTER
});
}
handlePlusCounter() {
this.counter += 1;
}
handleMinusCounter() {
this.counter -= 1;
}
}
export default alt.createStore(CounterStore, 'CounterStore');
CounterActions.PLUS_COUNTER
の PLUS_COUNTER
を actions に書いたキャメルケースにしても動いた。小文字のスネークケースにしたら動かなかった。どうなってるのかソースコード見た方がいいかも。
表示
$ python -m SimpleHTTPServer 8000
感想
- サンプルなので JS を1ファイルでまとめようかと思ったけど、
alt.createStore
とかあるのでalt は基本的にファイルを分けて書くのがよさそう。どのみち実際アプリ作る時はそうなると思うけど。
参考
Author And Source
この問題について(ReactJS + alt(flux) を ES6 の記述でカウンターのサンプル), 我々は、より多くの情報をここで見つけました https://qiita.com/cortyuming/items/a4952e05df636ff72689著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .