import Reflux from 'reflux';

var CounterAction = Reflux.createActions({
  "init": {},
  "inc": {},
  "dec": {},
});

export default CounterAction;

import Reflux from 'reflux';
import CounterAction from '../action/CounterAction';

var CounterStore = Reflux.createStore({

  init: function () {
    this.value = 0;
    this.listenTo(CounterAction.init, this.initValue.bind(this));
    this.listenTo(CounterAction.inc,  this.incValue.bind(this));
    this.listenTo(CounterAction.dec,  this.decValue.bind(this));
  },

  set: function (value) {
    this.value = value;
    this.trigger(value);
  },

  initValue: function () {
    this.set(0);
  },

  incValue: function () {
    this.set(this.value + 1);
  },

  decValue: function () {
    this.set(this.value - 1);
  }

});

export default CounterStore;

import React from 'react';
import CounterStore from '../store/CounterStore';
import CounterAction from '../action/CounterAction';

class Counter extends React.Component {
    constructor (props) {
        super(props);
        this.state = { count: 0 };
    }

    render () {
        return (
            <div>
                <h2>Counter "{this.props.name}"</h2>
                <button onClick={CounterAction.inc}>+</button>
                {this.state.count}
                <button onClick={CounterAction.dec}>-</button>
            </div>
        );
    }

    componentWillMount () {
        this.removeCounterListener = CounterStore.listen(count => {
            this.setState({ count });
        });
        CounterAction.init();
    }

    componentWillUnmount () {
        this.removeCounterListener();
    }
}

export default Counter