Reflux & HTTP APIs

actions.js

var ProductsApi = require('./api');

module.exports = Reflux.createActions({  
  'loadAll',         // initiates the async load
  'loadAllComplete', // when the load is complete
  'loadAllError'     // when the load has failed
});

module.exports.loadAll.preEmit = function (id) {
  ProductsApi.loadAll()
    .then(module.exports.loadComplete, module.exports.loadAllError);
};

api.js

var xhr = require('./xhr');

module.exports = {
  
  loadAll: function () {
    return xhr({
      url: '/api/products'
    });
  }
  
};

component.js

var ProductActions = require('./actions'),
  ProductsStore = require('./store');

module.exports = React.createClass({

  componentWillMount: function () {
    ProductsStore.listen(this.onProductsChange);
    ProductActions.loadAll();
  },

  onProductsChange: function (state) {
    this.setState(state);
  }

});

store.js

var ProductActions = require('./actions');

module.exports = Reflux.createStore({
  
  init: function () {
    this.state = {
      products: []
    };
    this.listenTo(ProductActions.loadAllComplete, this.onLoadAll);
  },
  
  getInitialState: function () {
    return this.state;
  },

  onLoadAll: function (products) {
    this.state.products = products;
    this.trigger(this.state);
  }
  
});

xhr.js

// this is just to wrap XMLHttpRequest in a promise

module.exports = function (options) {
  var deferred = Q.defer(),
    req = new XMLHttpRequest();

  req.open(options.method || 'GET', options.url, true);

  // Set request headers if provided.
  Object.keys(options.headers || {}).forEach(function (key) {
    req.setRequestHeader(key, options.headers[key]);
  });

  req.onreadystatechange = function(e) {
    if(req.readyState !== 4) {
      return;
    }

    if([200,304].indexOf(req.status) === -1) {
      deferred.reject(new Error('Server responded with a status of ' + req.status));
    } else {
      deferred.resolve(e.target.result);
    }
  };

  req.send(options.data || void 0);

  return deferred.promise;
}