spoike
10/17/2014 - 11:19 PM

Example from http://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html rewritten to use react and reflux

/** @jsx React.DOM */
var React = require('react'),
    Reflux = require('reflux'),
    toggle = Reflux.createAction(),
    userStore = Reflux.createStore({
      init: function() {
        this.notify = false;
        this.listenTo(toggle, this.onToggle);
      },
      onToggle: function(flag) {
        this.notify = flag;
        this.trigger(flag);
      }
    });

var Checkbox = React.createClass({
  mixins: [Reflux.ListenerMixin],
  componentDidMount: function() {
    this.listenTo(userStore, this.onChange);
  },
  onChange: function(val) {
    this.setState({notify: val});
  },
  notify: function() {
    toggle(this.refs.checkbox.getDOMNode().checked);
  },
  render: function() {
    return (<input ref="checkbox" type="checkbox" checked={this.state.notify} onChange={this.notify}>)
  }
});

React.renderComponent(<Checkbox/>, document.body);