ReactJS+facebook/flumx 카운터 샘플
17621 단어 ReactJavaScriptflux
의 목적
Web+DB Press Vol.87 Flex 기사가 좋아서 facebook/flux로 중점을 두고 썼어요.
(기사에서fluxxor
참고로 잡지의 샘플 코드는 이쪽 "Emerging Web Technology 연구실".입니다.
아래 todo 샘플을 참고하였습니다.
- [ https://github.com/facebook/flux/tree/master/examples/flux-todomvc ]
파일 구성
.
├── dest
│ └── app.js
├── index.html
├── package.json
└── src
├── app.jsx
└── app_dispatcher.js
package
reactify 대신 babelify 사용하기
pacage.json
{
"devDependencies": {
"babelify": "^6.1.2",
"browserify": "^10.2.4",
"watchify": "^3.2.3"
},
"scripts": {
"watch": "watchify -t babelify src/app.jsx -o dest/app.js -v"
},
"dependencies": {
"flux": "^2.0.3",
"keymirror": "^0.1.1",
"object-assign": "^3.0.0",
"react": "^0.13.3"
}
}
$ npm install
$ npm run watch
code
src/app.jsx
var EventEmitter = require('events').EventEmitter;
var React = require('react');
var assign = require('object-assign');
var keyMirror = require('keymirror');
var AppDispatcher = require('./app_dispatcher');
var CounterConstants = keyMirror({
UPDATE_COUNTER: null
});
// Store
var CHANGE_EVENT = 'change';
var counter = 0;
var CounterStore = assign({}, EventEmitter.prototype, {
getCounter: function() {
return counter;
},
emitChange: function() {
this.emit(CHANGE_EVENT);
},
addChangeListener: function(callback) {
this.on(CHANGE_EVENT, callback);
},
onUpdateCounter: function(value) {
counter += value;
}
});
AppDispatcher.register(function(action) {
switch(action.actionType) {
case CounterConstants.UPDATE_COUNTER:
CounterStore.onUpdateCounter(action.value);
CounterStore.emitChange();
break;
default:
// no op
}
});
// Action
var CounterActions = {
plusCounter: function() {
AppDispatcher.dispatch({
actionType: CounterConstants.UPDATE_COUNTER,
value: 1
});
},
minusCounter: function() {
AppDispatcher.dispatch({
actionType: CounterConstants.UPDATE_COUNTER,
value: -1
});
}
};
// View
function getCounterState() {
return {
value: CounterStore.getCounter()
};
}
var CounterAppView = React.createClass({
getInitialState: function() {
return getCounterState();
},
componentDidMount: function() {
CounterStore.addChangeListener(this.onChange);
},
render: function() {
return (
<div>
<span>count: {this.state.value}</span>
<CounterView />
</div>
);
},
onChange: function() {
this.setState(getCounterState());
}
});
var CounterView = React.createClass({
render: function() {
return (
<div>
<div>
<button onClick={this.onClickPlus}>+1</button>
<button onClick={this.onClickMinus}>-1</button>
</div>
</div>
);
},
onClickPlus: function() {
CounterActions.plusCounter();
},
onClickMinus: function() {
CounterActions.minusCounter();
}
});
React.render(
<CounterAppView />,
document.getElementById('app-container')
);
var Dispatcher = require('flux').Dispatcher;
module.exports = new Dispatcher();
<!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>
나타내다
$ python -m SimpleHTTPServer 8000
계속하다
감상
참고 자료
Reference
이 문제에 관하여(ReactJS+facebook/flumx 카운터 샘플), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/cortyuming/items/ffbb4dde971b921d92c1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
