reactjs

var ProductsApi = {
  loadAll: function() {
    return APIUtils.get('/products');
  }
};

var ProductActions = Reflux.createActions(['loadAll', 'loadAllComplete']);
ProductActions.loadAll.preEmit = function() {
  ProductsApi.loadAll().then(ProductActions.loadAllComplete);  
};

var ProductsStore = Reflux.createStore({
  init: function() {
    this._products = [];
    this.listenTo(loadAllComplete, this.onLoadAll);
  },

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

var Products  = React.createClass({
  componentWillMount: function() {
    ProductsStore.listen(this.onProductsChange);
    ProductActions.loadAll();
  },

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

changeTitle: function (title) {
    this.title = title;
    this.emit('change');
  },
  getTitle: function () {
    return this.title;
  }
componentWillMount: function () {
    store.addChangeListener(this.updateTitle);
  },
  updateTitle: function () {
    this.setState({
      title: store.getTitle()
    });
  },
  render: function () {
    return (<div>{this.state.title}</div>);
  }
  
play: function () {
    this.isPlaying = true;
    this.emit('change');
    this.emit('play');
  },
  stop: function () {
    this.isPlaying = false;
    this.emit('change');
    this.emit('stop'); 
  },
  isPlaying: function () {
    return this.isPlaying;
  }

componentWillMount: function () {
    store.addChangeListener(this.update);
    store.addListener('play', this.startDuration);
    store.addListener('stop', this.stopDuration);
  },
  startDuration: function () {
    this.interval = setInterval(function () {
      this.setState({
        duration: this.state.duration++
      });
    }.bind(this), 1000);
  },
  stopDuration: function () {
    clearInterval(this.interval);
  },
  update: function () {
    this.setState({
      buttonClass: store.isPlaying() ? 'red' : 'green'
    });
  },
  render: function () {
    return (<div><button className={this.state.buttonClass}>Toggle</button> {this.state.duration}</div>);
  }