state-sketch.js

import React from 'react'

var store = {
	_finishedUpdating () {
		this.listeners.forEach(listener => {
			var value = findInTree(state, listener.property)

			listener.callback(value)
		})
	}
}

// support various operations
store.set('some.path', { new: 'value' })
store.incr('numeric.value')
store.push('array.thing', newVal)

const makeListener = (Component, propertyMap) =>
	class extends React.Component {
		componentWillMount () {
			this.cancels = Object.keys(propertyMap).map(property =>
				createListener(property, value =>
					this.setState(propertyMap[property], value)
				)
			)
		}

		render () {
			return <Component {...Object.keys(propertyMap).reduce((property, acc) => {
				var propName = propertyMap[property]
				,   value    = this.state[propName]

				acc[propName] = value
				acc
			}, {})} />
		}
	}


// Example

const FloopyComponent = ({ prop1, prop2 }) =>
	<div>hi {prop1} hi {prop2}</div>

makeListener(FloopyComponent, {
	'path.to.prop1': 'prop1',
	'path.to.prop2': 'prop2',
})

let state = {
	path: {
		to: {
			prop1: 'hello',
			prop2: 'world',
		}
	}
}