reflux sample (best practices) attempt

app.js

// let's say we have this directory
/**
 |-- app/
 |  |-- Post/
 |  |  |-- index/
 |  |  |-- create/
 |  |  |  |  |-- PostCreateStore.js
 |  |  |  |  |-- PostCreate.js
 |  |  |-- edit/
 |  |  |-- PostActions.js
 |-- components/
 |  |-- PostCreate/
 |  |  |-- PostCreateForm.js
 |  |  |-- PostCreateButton.js
 |  |  |-- Whatever.js
 |  |-- // other components
 |-- app.js
*/
// other requires
var PostCreate = require('./app/Post/create/PostCreate');
// Routes, etc
var routes = (
  <Route path="/posts">
    // Other routes
    // index, edit.. etc
    <Route path="/create" handler={PostCreate}">
  </Route>
)

// Run react-router.

PostActions.jsx

var Reflux = require('reflux');

module.exports = Reflux.createAction([
  // other things
  onCreateSuccess,
  onCreateError
]);

PostCreate.js

/** @jsx React.DOM */
var React = require('react');
var Reflux = require('reflux');
var PostCreateStore = require('./PostCreateStore');
var PostCreateForm = require('../../components/PostCreate/PostCreateForm');

// The main template or component for the PostCreate module itself
var PostCreate = React.createClass({
  mixins: [Reflux.connect(todoListStore,"list")]
});

PostCreateButton.jsx

/** @jsx React.DOM */
var React = require('react');
var Reflux = require('reflux');

// A component which handles the request etc
// receives prop
var PostCreateButton = React.createClass({
  getInitialState: function() { return { loading: false }; },
  render: function() { /** */ },
  _handleCreate: function() {
    this.setState({ loading: true });
    // ajax
    .success(function(response) { this.props.handleCreateSuccess(response.data); })
    .error(function(response) { this.props.handleCreateError(response.data); })
    .finally(function(response) { this.setState({ loading: false }); });
  }
});

module.exports = PostCreateButton;

PostCreateForm.js

/** @jsx React.DOM */
var React = require('react');
var Reflux = require('reflux');
var PostCreateButton = require('./PostCreateButton');

// A component used to handle the form (uses PostCreateButton)
// receives prop
// handleCreateSuccess
// handleCreateError
var PostCreateForm = React.createClass({
  getInitialState: function() { return { loading: false }; },
  render: function() {
    return (
      // Input whatever
      // Label whatever
      <PostCreateButton data={this.state.data}
        handleCreateSuccess={this.props.handleCreateSuccess}
        handleCreateError={this.props.handleCreateError} />
    );
  }
});

module.exports = PostCreateForm;

PostCreateStore.jsx

var Reflux = require('reflux');
var PostActions = require('../PostActions');

var _data = {};

module.exports = {
  listenables: [PostActions],
  onCreateSuccess: function(data) { /** do */ },
  onCreateError: function(data) { /** do */ },
  // updates data, trigger
  _update: function(data) { }
}