The mixins

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

// Lets look at the tree
tree.get(); // { todos: { items: [] } }

var Todos = React.createClass({
  mixins: [tree.mixin],
  cursors: {
    todos: ['todos', 'items']
  },
  render: function () {
    return (
      <div>
       There are {this.state.cursors.todos.length} todos in the tree
      </div>
    );
  }
});

By using the mixin on the tree you are able to define a cursors property. It is a map of the state you want to grab from the tree. The key is the name of the cursor which you use to point to the data. The value is a Baobab selector.

When the component loads it will grab the current state from the cursors and attach it to the state object of the component, under the cursors property.