Reflux examples

gistfile1.txt

http://blog.mojotech.com/react-and-reflux-in-5-minutes/

var Reflux = require('reflux');

var ContentReviewerActions = Reflux.createActions({  
 // Child actions 'completed' and 'failed' are called by resolution of listenAndPromise
 "loadReview": { children: ['completed', 'failed'] },
 "updateStatus": {},
 "submitReview": {}
});

// Reflux actions can trigger server calls, which we use to load the content to review
ContentReviewerActions.loadReview.listenAndPromise( function() {  
 return $.ajax({
   type: "GET",
   url: Routes.content_reviews_path({ format: 'json' })
 });
});

module.exports = ContentReviewerActions;  


var Reflux = require('reflux');  
var ContentReviewerActions = require('../actions/content_reviewer_actions');

var ContentReviewerStore = Reflux.createStore({  
 // Shorthand for listening to all ContentReviewerActions
 listenables: ContentReviewerActions,

 data: {},

 // Load a review when the store is initialized
 init: function() {
   ContentReviewerActions.loadReview();
 },

 // Clear out the current review and any errors while we load the next review
 onLoadReview: function() {
   this.data.review = null;
   this.data.loadError = null;

   this.trigger(this.data);
 },

 // Called from ContentReviewerActions.loadReview.listenAndPromise
 onLoadReviewCompleted: function(res) {
   this.data.review = res.review;
   this.data.loadError = res.error;

   this.trigger(this.data);
 },

 // Called from ContentReviewerActions.loadReview.listenAndPromise
 onLoadReviewFailed: function() {
   this.data.loadError = "Could not load review.";

   this.trigger(this.data);
 },

 // Update status, pass updated state back to component(s)
 onUpdateStatus: function(status) {
   this.data.review.status = status;

   this.trigger(this.data);
 },

 // Submit current review while we load the next one
 onSubmitReview: function() {
   this.submitReview();
   ContentReviewerActions.loadReview();
 },

 // When we need to reference store data in our server requests, it's easier
 // to handle the communication in the store instead of the actions.
 submitReview: function() {
   $.ajax({
     type: "PUT",
     url: Routes.review_path(this.data.review.review_id, { operation: this.data.review.status })
   }).done(function(res) {
     // Success notification
   }).fail(function(xhr) {
     // Error notification
   });
 }
});

module.exports = ContentReviewerStore;  

var React = require('react');  
var Reflux = require('reflux');  
var ContentReviewerStore = require('../../stores/content_reviewer_store');  
var ContentReviewerActions = require('../../actions/content_reviewer_actions');

var ContentReviewer = React.createClass({  
 // Connects this.state in component to this.data in store
 mixins: [ Reflux.connect(ContentReviewerStore, "review") ],

 render: function () {
  // Typically each of these branches would be its own component. I've inlined them here for simplicity's sake.
  if (this.state.review) {
   return (
    <div>
     <h1>{ this.state.review.review_id }</h1>
     <button onClick={ this._markApproved }>Approve</button>
     <button onClick={ this._markRejected }>Reject</button>
     <button onClick={ this._submitReview }>Submit</button>
    </div>
   )
  } else if (this.state.loadError) {
   return (
    <h1 className="alert">{ this.state.loadError }</h1>
   )
  } else {
   return (
    <span>"Loading"</span>
   )
  }
 },

 _markApproved: function() {
  ContentReviewerActions.updateStatus("approved");
 },

 _markRejected: function() {
  ContentReviewerActions.updateStatus("rejected");
 },

 _submitReview: function() {
  ContentReviewerActions.submitReview();
 }
});

module.exports = ContentReviewer;  


var Store = Reflux.createStore({
  init: function() {
    this.listenTo(MyActionSet.myAction1, this.onMyAction1);
    this.listenTo(MyActionSet.myAction2, this.onMyAction2);
    this.listenTo(DifferentActions.myAction1, this.onMyConfusedAction);
  }
  onMyAction1: function() {},
  onMyAction2: function() {},
  onMyConfusedAction: function() {}
});