react-data-binding v0.4.2
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.contextstoreName.
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.contextstoreName 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
License
react-data-binding is released under the MIT license.