react-data-binding

do react data binding in an easy way. inspired by redux.

examples

http://yiminghe.github.io/react-data-binding

work with redux: http://yiminghe.github.io/react-data-binding/examples/redux.html

@createContainer({
  // specify data need to be concerned
  myUser: 'user'
})
class User extends Component {

  @autobind
  onClick(e) {
    e.preventDefault();
    // trigger re render
    this.props.setStoreState({
      // better use immutable.js
      user: {
        name: 'updated: ' + Date.now()
      }
    });
  }

  render() {
    return (<a href="#" onClick={this.onClick}>{this.props.myUser.name}</a>);
  }
}


@createRootContainer({
  // initial app data
  user: {
    name: 'initial'
  }
})
class App extends React.Component {
  render() {
    return <User/>;
  }
}

ReactDOM.render(<App />, document.getElementById('__react-content'));

api

Store

build in Store class, you can extend it to create your own store(such as redux store with reducer/dispatch).

createRootContainer(initialAppData: Object|Store, option: {storeName='store'}): (Function(WrappedComponent:ReactComponent):ReactComponent)

bind the initial global store state to react root component and generate a high order React Component.

will save global store to this.context[storeName].

createContainer(selector: Object|Function, option: {pure=true, mapStoreProps:Function():Object, storeName='store'}): (Function(WrappedComponent:ReactComponent):ReactComponent)

bind the subset of store state to react child component and generate a high order React Component.

will receive this.context[storeName] as global store.

WrappedComponent will receive the specified subset of store state and return value of option.mapStoreProps(store) as props.

default mapStoreProps will generate the following props:

setStoreState(state: Object)

update the global store state and re render react child components which bind to the specified subset of store state.

getStoreState()

get the global store state. use with caution.

batchStore(callback: Function): Function

return a function which will batch setStoreState calls inside callback.

Test Case

http://localhost:8111/tests/runner.html?coverage

Coverage

http://localhost:8111/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8001/tests/runner.html?coverage

License

react-data-binding is released under the MIT license.