Nuclearjs React DataProvider component

DataProvider.js

import React from "react"
import Reactor from "./reactor"

function _toJS(x) {
  if (x && x.toJS && typeof x.toJS === 'function') {
    return x.toJS()
  }
  return x
}

export default React.createClass({
  propTypes: {
    reactor: React.PropTypes.instanceOf(Reactor),
    children: React.PropTypes.element.isRequired,
  },
  getInitialState() {
    let state = {}
    this.getDataBinding().forEach( (key, getter) =>
      state[key] = _toJS(this.props.reactor.evaluate(getter))
    )
    return state
  },
  componentDidMount() {
    this.__unwatchFns = []
    this.getDataBinding().forEach( (key, getter) => {
      let unwatchFn = this.props.reactor.observe(getter, (val) => {
        let newState = {}
        newState[key] = _toJS(val)
        this.setState(newState)
      })

      this.__unwatchFns.push(unwatchFn)
    })
  },
  componentWillUnmount() {
    while (this.__unwatchFns.length) {
      this.__unwatchFns.shift()()
    }
  },

  getDataBinding() {
    return Object.keys(this.props).filter( (key) =>
      key !== 'reactor' && key !== 'children'
    )
  },

  render() {
    return React.withContext(
      { dispatch: this.props.reactor.dispatch },
      React.cloneElement(this.props.children, this.state)
    )
  }
})

example.js

// Usage:


const reactor = new Reactor()
reactor.registerStores({
  users: require('userStore'),
  dogs: require('dogStore'),
})

const userGetter = [
  ['users'],
  (users) => {
    return users[0]
  }
]
const dogGetter = [
  ['dogs'],
  userGetter,
  (dogs, user) => {
    return dogs.findOne( (dog) => dog.owner === user )
  }
]

const RootComponent = React.createClass({
  render() {
    return (
      <DataProvider reactor={reactor} user={userGetter} dog={dogGetter}>
        // gets `user` and `dog` props
        <UserAndDogView />
      </DataProvider>
    )
  }
})

const UserAndDogView = React.createClass({
  propTypes: {
    user: React.propTypes.object.isRequired,
    dog: React.propTypes.object.isRequired,
  },
  _renameDog(e) {
    let name = e.target.value
    this.context.dispatch(RENAME_DOG, { name })
  },
  render() {
    let { user, dog } = this.props

    return (
      <div>
        <label>
          { user.name }
          has a dog named:
          <input
            type="text"
            value={ dog.name }
            onChange={ this._renameDog }
          />
        </label>
      </div>
    )
  }
})