Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
// a dummy promise call which resolves or rejects 1000ms later
var dummyPromiseCall = function(isFail) {
var deferred = Q.defer();
// fake asynchronous call
setTimeout(function() {
if(isFail) {
deferred.reject('Failed!');
} else {
deferred.resolve('Success!');
}
}, 1000);
return deferred.promise;
};
/*********Actions*********/
// this creates 'load', 'load.completed' and 'load.failed'
var Actions = Reflux.createActions({
"load": {children: ["completed","failed"]},
});
// called before the 'load' action emits an event
Actions.load.preEmit = function() {
console.log(arguments);
};
// called after preEmit
Actions.load.shouldEmit = function(isFail) {
console.log('isFail:' + isFail);
return !isFail;
}
// when 'load' is triggered, call async operation and trigger related actions
Actions.load.listen(function(isFail) {
// By default, the listener is bound to the action
// so we can access child actions using 'this'
dummyPromiseCall(isFail)
.then(this.completed)
.catch(this.failed);
})
// `promise` style
// Actions.load.listen(function(isFail) {
// Actions.load.promise(dummyPromiseCall(isFail));
// });
// `listenAndPromise` style
// Actions.load.listenAndPromise(dummyPromiseCall);
/*********Actions*********/
/*********Store*********/
// Creating Data Stores(https://github.com/reflux/refluxjs#creating-data-stores)
var Store = Reflux.createStore({
// Listening to many Actions at once(https://github.com/reflux/refluxjs#listening-to-many-actions-at-once)
listenables: [Actions],
// called when 'load' triggers
onLoad: function() {
this.trigger('Loading...');
},
// Listenabled and asynchronous actions(https://github.com/reflux/refluxjs#listenables-and-asynchronous-actions)
// called when 'load.completed' triggers
onLoadCompleted: function(msg) {
this.trigger(msg);
},
// called when 'load.failed' triggers
onLoadFailed: function(msg) {
this.trigger(msg);
}
});
/*********Store*********/
/*********React Component*********/
var Hello = React.createClass({
// Convenience mixin for React(https://github.com/reflux/refluxjs#convenience-mixin-for-react)
// https://github.com/reflux/refluxjs#using-refluxlistento
mixins: [
Reflux.listenTo(Store, 'onLoad'),
Reflux.listenTo(Store, 'onLoadComplete'),
Reflux.listenTo(Store, 'onLoadFailed')
],
// initialize this.state.message
getInitialState: function() {
return {
message: 'initial message'
}
},
handleLoadSuccess: function() {
// trigger the 'load' Action
Actions.load(false /*isFail*/);
},
handleLoadFail: function() {
// trigger the 'load' Action
Actions.load(true/*isFail*/)
},
// called when the Store fires 'onLoad'
onLoad: function(msg) {
this.setState({message: msg});
},
// called when the Store fires 'onLoadComplete'
onLoadComplete: function(msg) {
this.setState({message: msg});
},
// called when the Store fires 'onLoadFailed'
onLoadFailed: function(msg) {
this.setState({message: msg});
},
render: function() {
return <div>
<button onClick={this.handleLoadSuccess}>Load Success</button>
<button onClick={this.handleLoadFail}>Load Fail</button>
<div>{this.state.message}</div>
</div>;
}
});
React.render(<Hello />, document.body);
/*********React Component*********/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment