YyXKpO

script.js

var Dispatcher = new Flux.Dispatcher();
var CHANGE_EVENT = 'change';
var BaseStore = Object.assign({}, EventEmitter.prototype, {

  emitChange: function() {
    this.emit(CHANGE_EVENT);
  },

  addChangeListener: function(callback) {
    this.on(CHANGE_EVENT, callback);
  },

  removeChangeListener: function(callback) {
    this.removeListener(CHANGE_EVENT, callback);
  }
})

var ActionTypes = {
  ADD_ONE: 'ADD_ONE'
}
var ActionCreators = {
  createAddOne: function () {
    Dispatcher.dispatch({
      type: ActionTypes.ADD_ONE
    });
  }
}

var _ticker = 1;
var TickerStore = Object.assign({}, BaseStore, {
  getTicker: function () {
    return _ticker;
  },
  dispatchToken: Dispatcher.register(function(action){
    switch(action.type){
      case ActionTypes.ADD_ONE:
        _ticker = _ticker + 1;
        TickerStore.emitChange();
        break;
    }
  })
})


var Ticker = React.createClass({
  _getStateFromStores: function(){
    return {ticker: TickerStore.getTicker()};
  },
  _onChange: function(){
    this.setState(this._getStateFromStores());
  },
  getInitialState: function() {
    return this._getStateFromStores();
  },
  componentDidMount: function(){
    TickerStore.addChangeListener(this._onChange)
  },
  componentWillUnmount: function(){
    TickerStore.removeChangeListener(this._onChange)
  },
  _onPlus: function(){
    ActionCreators.createAddOne();
  },
  render: function() {
    return (
      <div>
        <h3>{this.state.ticker}</h3>
        <button onClick={this._onPlus}>+</button>
      </div>
    );
  }
})

window.addEventListener('DOMContentLoaded', function() {
    React.render(
      <Ticker/>,
      document.body
    );
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flux/2.1.1/Flux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/EventEmitter/4.2.11/EventEmitter.min.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure.css" rel="stylesheet" />

YyXKpO.markdown

YyXKpO

A Pen by Steve Krouse on CodePen.

License.