The concepts

The three basic parts

The tree

tree.js

var Baobab = require('baobab');
var React = require('react/addons');

var tree = new Baobab({
  todos: []
}, {
  shiftReferences: true,
  mixins: [React.addons.PureRenderMixin]
});

module.exports = tree;

The event hub

It is suggested that you use emmett as event hub, as that is what Baobab uses. Less dependencies for your app.

events.js

var Emmett = require('emmett');
module.exports = new Emmett();

Components

App.jsx

var tree = require('./tree.js');
var events = require('./events.js');
var React = require('react');

var Todos = React.createClass({
  mixins: [tree.mixin],
  cursors: {
    todos: ['todos']
  },
  getInitialState: function () {
    return {title: ''};
  },
  updateTitle: function (event) {
    this.setState({title: event.target.value});
  },
  addTodo: function (e) {
    e.preventDefault();
    events.emit('addTodo', this.state.title);
    this.setState({title: ''});
  },
  renderTodo: function (todo) {
    return (
      <li>{todo.title}</li>
    );
  },
  render: function () {
    return (
      <div>
        <form onSubmit={this.addTodo}>
          <input type="text" value={this.state.title} onChange={this.updateTitle}/>
        </form>
        <ul>
         {this.state.cursors.todos.map(this.renderTodo)}
        </ul>
      </div>
    );
  }
});

Summary

Ideally the only thing your components depend on is the tree and the event hub. That makes your components completely decoupled from your business logic. This is important to keep your application manageable and scaleable. It also makes it very easy to introduce isomorphism.