reflux_store_connection.js

/*********************************************************************
 *                 Both of these examples use state                  *
 *********************************************************************/
var StatusParent = React.createClass({
  render: function() {
    return (
      <Status/>
    );
  },
});


// long-form-example
var Status = React.createClass({
    getInitialState: function() { },
    onStatusChange: function(status) {
        this.setState({
            currentStatus: status
        });
    },
    componentDidMount: function() {
        this.unsubscribe = statusStore.listen(this.onStatusChange);
    },
    componentWillUnmount: function() {
        this.unsubscribe();
    },
    render: function() {
      return (
        <h1>this.state.currentStatus</h1>
      );
    }
});

// shortest form
var Status = React.createClass({
    mixins: [Reflux.connect(statusStore,"currentStatus")],
    render: function() {
      return (
        <h1>this.state.currentStatus</h1>
      );
    }
});


/*********************************************************************
 *             Functionally equivelent, but uses props:              *
 *********************************************************************/
var StatusParent = React.createClass({
  render: function() {
    return (
      <StoreConnection propName="currentStatus" store={statusStore}>
        <Status />
      </StoreConnection>
    );
  },
});

var Status = React.createClass({
  render: function() {
    return <h1>this.props.currentStatus</h1>;
  }
});




/*********************************************************************
 *                            BUT HOW???                             *
 *********************************************************************/


var StoreConnection = React.createClass({

  getInitialState() {
    return {
      storeData: null,
    };
  },

  _handleStoreUpdate(storeData) {
    this.setState({storeData: storeData});
  },

  _subscribeToStore() {
    this.storeUnsubscribe = this.props.store.listen(this._handleStoreUpdate);
  },

  _unsubscribeFromStore() {
    this.storeUnsubscribe();
  },

  componentWillMount() {
    this.unlisten = this.props.store.listen(this.handleStoreUpdate);
  },

  render(){
    var child = React.children.only(this.props.children);
    var extraProp = {};

    // clone our child, setting the propname to the state variable
    // as they asked.
    extraProp[this.props.propName] = this.state.storeData;
    return React.cloneElement(child, extraProp);
  }
});