title: Emitting and handling global events with react
body: <p>I'm playing around a bit with react to build an "Add to cart button". Here's my code.</p>
  
  <pre><code>var ProductPurchase = React.createClass({
    handleSubmit: function(e){
      e.preventDefault();
      $.ajax({
        url: "/cart/add.js",
        method: "post",
        dataType: "json",
        data: {
          "id": this.props.variantId,
          "quantity": this.props.quantity,
        },
        success: function(data) {
          // emit cart added event
        }.bind(this),
        error: function(xhr, status, err) {
          // emit error event (cart added)
        }.bind(this)
      });
    },
    getDefaultProps: function(){
      return {
        quantity: 1,
        variantId: 231634908,
        buttonText: "Add to cart"
      }
    },
    render: function() {
      return (
        &lt;div className="productPurchase"&gt;
          &lt;form action="/cart/add" method="post" enctype="multipart/form-data" onSubmit={this.handleSubmit}&gt;
            &lt;input type="hidden" name="quantity" value={ this.props.quantity } /&gt;
            &lt;input type="hidden" name="id" value={ this.props.variantId } /&gt;
            &lt;button type="submit"&gt;{this.props.buttonText}&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p>What I'm curious about is this ajax handler. I'm pretty sure the whole point of react is interoperability between components, except I don't know where to lead these events off to. I could imagine a couple of different components like a cart count indicator if success or a error alert if failure but I don't exactly know how to tap into these. Is this the whole point of <a href="http://facebook.github.io/flux/docs/overview.html" rel="noreferrer">flux's dispatchers</a>?</p>