title: React+Reflux: Passing Variables to Data Stores
body: <p>I'm building a React+Reflux application that, among other things, allows for the creation/deletion/editing of categories.  So far I'm able to display all categories and handle creation/deletion of categories within a React component through associated stores and actions.  This all works great, updates the database and re-renders the component as expected.  My sticking point is when trying to drill down into a specific existing category in order to edit it.</p>
  
  <p>I <em>think</em> I somehow need to pass a category Id to a store which will then pass it along to a php/sql query via an ajax call in order to get/set data specific to that particular category.  If I bypass the store altogether and put the ajax call within the component itself I'm able to get it working via a url parameter with React-router (no auto re-render of course) but I haven't been able to figure out how to accomplish this through a store.</p>
  
  <p>In other words, this more or less works:</p>
  
  <ul>
  <li>"ManageCategories" React component that uses CategoryStore to list all categories each wrapped in an anchor tag that passes the category Id along to "ManageCategory" route/component</li>
  <li>The "ManageCategory" component uses the category Id param directly in an ajax call within its getInitialState method to display data specific to the category</li>
  </ul>
  
  <p>However, I think below is the more correct Reflux way to do this but I'm not sure how to get it to work:</p>
  
  <ul>
  <li>"ManageCategories" component same as above</li>
  <li>"ManageCategory" component that somehow passes its category Id param to the CategoryStore (or maybe a different "IndividualCategoryStore"?) which returns only data specific to that category and handles updates/edits to that category</li>
  </ul>
  
  <p>I was able to get a sort of clunky version of this working by adding a new method ("getCategoryData") to the CategoryStore that is  called in the getInitialState method of the "ManageCategory" component and is passed the categoryId param.  This results in a flash of all categories (from the CategoryStore's getDefaultData) followed by the correct single category listing (from the component's getInitialState).</p>
  
  <p>I feel fairly comfortable with the concepts behind React+Reflux but at this point I think it's likely I'm misunderstanding something fundamental.  Worked on this particular issue for more than a week but none of the examples/tutorials/docs I've found address the specific question of passing a variable to a data store.</p>
  
  <p>Actions:</p>
  
  <pre><code>var Actions = Reflux.createActions([
  "createCategory",
  "deleteCategory",
  "editCategory"
  ]);
  </code></pre>
  
  <p>CategoryStore:</p>
  
  <pre><code>var CategoryStore = Reflux.createStore({
  listenables: [Actions],
  onCreateCategory: function(catName) {
      // ajax call to create new category that calls updateCategories on success
  },
  onDeleteCategory: function(catId) {
      // ajax call to delete category that calls updateCategories on success
  },
  updateCategories: function(){
      $.ajax({
          url: url + '?action=getAllCategories',
          async: false,
          dataType: 'json',
          success: function(categoryData) {
              this.categories = categoryData;
          }.bind(this),
          error: function(xhr, status, err) {
              console.error(url, status, err.toString());
          }.bind(this)
      });
      this.trigger(this.categories);
  },
  getDefaultData: function() {
      $.ajax({
          url: url + '?action=getAllCategories',
          async: false,
          dataType: 'json',
          success: function(categoryData) {
              this.categories = categoryData;
          }.bind(this),
          error: function(xhr, status, err) {
              console.error(url, status, err.toString());
          }.bind(this)
      });
      return this.categories;
  }
  });
  </code></pre>
  
  <p>Category Component:</p>
  
  <pre><code>var Category = React.createClass({
  handleDeleteCategory: function() {
      Actions.deleteCategory(this.props.id);
  },
  render: function() {
      return (
          &lt;li className="category"&gt;
              &lt;IconButton icon="action-highlight-remove" onClick={this.handleDeleteCategory} /&gt;
              &lt;h5&gt;&lt;a href={"/#/manage-category/" + this.props.id}&gt;{this.props.name} ({this.props.id})&lt;/a&gt;&lt;/h5&gt;
          &lt;/li&gt;
      );
  }
  });
  </code></pre>
  
  <p>ManageCategories Component:</p>
  
  <pre><code>var ManageCategories = React.createClass({
  mixins: [
      Reflux.connect(CategoryStore, "categories")
  ],
  getInitialState: function() {
      return {
          categories: []
      };
  },
  handleCreateCategory: function() {
      // category creation code
  },
  render: function() {
      var categoryNodes = this.state.categories.map(function(category) {
          return (
              &lt;Category name={category.name} id={category.id} /&gt;
          )
      });
      return (
          &lt;div className="dev-tools-container"&gt;
              &lt;h1&gt;Developer Tools&lt;/h1&gt;
              &lt;div className="categories"&gt;
                  &lt;h3&gt;Categories&lt;/h3&gt;
                  &lt;ul&gt;
                      {categoryNodes}
                  &lt;/ul&gt;
                  &lt;h4&gt;Create New Category:&lt;/h4&gt;
                  &lt;form&gt;
                      &lt;label htmlFor="new-category-name"&gt;Category Name&lt;/label&gt; &lt;input type="text" id="new-category-name" /&gt;&lt;br /&gt;
                      &lt;PaperButton label="Create" primary={true} onClick={this.handleCreateCategory} /&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  });
  </code></pre>
  
  <p>Thanks in advance for any insights or assistance.</p>