reflux & react-router

Search.js

var React = require('react');
var { RouteHandler } = require('react-router');
var UserSearchResults = require('../components/UserSearchResults');

var actions = require('../actions/actions');
var SearchStore = require('../stores/SearchStore');
var Reflux = require('reflux');

var Search = React.createClass({
  mixins: [Reflux.connect(SearchStore, 'search')],
  contextTypes: {
    router: React.PropTypes.func
  },
  search(e) {
    e.preventDefault();
    this.context.router.transitionTo('searchResults', {
      search: this.refs.username.getDOMNode().value.trim()
    });
  },
  onChange() {
    this.setState({search: this.refs.username.getDOMNode().value});
  },
  render() {
    return (
      <form className='row' onSubmit={this.search}>
        <input  className='col s8 offset-s2 input-field center-align'
                type='text'
                placeholder='Search for Users'
                value={this.state.search}
                onChange={this.onChange}
                ref='username' />
        <RouteHandler />
      </form>
    );
  }
});

module.exports = Search;

SearchStore.js

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

var SearchStore = Reflux.createStore({
  listenables: actions,

  getInitialState() {
    return '';
  },
  onSearchUsers(search) {
    this.trigger(search);
  }
});

module.exports = SearchStore;

UserSearchResults.js

var React = require('react');
var Reflux = require('reflux');
var UsersStore = require('../stores/UsersStore');
var { Link } = require('react-router');
var actions = require('../actions/actions');

var UserSearchResults = React.createClass({
  mixins: [Reflux.connect(UsersStore, 'users')],
  contextTypes: {
    router: React.PropTypes.func
  },
  statics: {
    // Transitions are triggered thru either the search input
    // or url traversing - trigger action here for both
    willTransitionTo(t, params) {
      actions.searchUsers(params.search);
    }
  },
  render() {
    var users = this.state.users.map((user) => {
      return (
      <li className='col s4' key={user.login}>
        <Link to='user' params={{username: user.login}}>
          {user.login}
        </Link>
      </li>);
    });

    return (
      <ul className='row'>{users}</ul>
    );
  }
});

module.exports = UserSearchResults;

UsersStore.js

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

var UsersStore = Reflux.createStore({
  listenables: actions,

  getInitialState() {
    return [];
  },

  onSearchUsers() {
    this.trigger([]);
  },

  onSearchUsersCompleted(users) {
    this.trigger(users.items);
  }
});

module.exports = UsersStore;