Container.js

import React from 'react';

export default React.createClass({
  displayName: 'CerebralContainer',
  childContextTypes: {
    tree: React.PropTypes.object.isRequired
  },
  getChildContext: function () {
    return {
      tree: this.props.tree
    }
  },
  render: function () {
    return React.DOM.div(this.props);
  }
})

Example.js

import React from 'react';
import {render} from 'react-dom';
import Container from './Container';
import HelloWorld from './HelloWorld.js';
import StateTree from './StateTree';

const tree = StateTree({
  title: 'Whatap!'
});


render((
  <Container tree={tree}>
    <HelloWorld />
  </Container>
), document.querySelector('#app'));

setTimeout(function () {
  tree.set('title', 'woho!');
  tree.flushChanges();
  console.log('changed!');
}, 1000);

HelloWorld.js

import React from 'react';
import Decorator from './Decorator';

function HelloWorld (props) {
  return (
    <h1>{props.title}</h1>
  );
}

export default Decorator(HelloWorld, {
  title: 'title'
});

HOC.js

import React from 'react';

function hasPath(path, changes) {
  return path.split('.').reduce(function (changes, key) {
    return changes[key];
  }, changes);
}

export default function (Component, paths) {
  class Wrapper extends React.Component {
    constructor(props) {
      super(props);
      this.update = this.update.bind(this);
    }
    componentWillMount() {
      this.context.tree.subscribe(this.update);
    }
    componentWillUnmount() {
      this.context.tree.unsubscribe(this.update);
    }
    update(changes) {
      for (var key in paths) {
        if (hasPath(paths[key], changes)) {
          return this.forceUpdate();
        }
      }
    }
    getProps() {
      var tree = this.context.tree;
      var props = this.props || {};
      var propsToPass = Object.keys(paths || {}).reduce(function (props, key) {
        props[key] = tree.get(paths[key]);
        return props
      }, {})

      propsToPass = Object.keys(props).reduce(function (propsToPass, key) {
        propsToPass[key] = props[key]
        return propsToPass
      }, propsToPass)

      return propsToPass
    }
    render() {
      return React.createElement(Component, this.getProps())
    }
  }
  Wrapper.contextTypes = {
    tree: React.PropTypes.object
  };

  return Wrapper;
}