React bindings for dob.
Design idea from Mobx Implementation
npm i dob-reactHere is a basic demo, and here is a demo with fractal.
import { Provider, Connect } from 'dob-react'
@Connect
class App extends React.Component <any, any> {
render() {
return (
<span>{this.props.store.name}</span>
)
}
}
ReactDOM.render(
<Provider store={{ name: 'bob' }}>
<App />
</Provider>
, document.getElementById('react-dom'))Connect: All parameters from outer Provider are injected into the wrapped components, and the component rerender when the variables used in the render function are modified(sync usage).
Connect all from Provider's parameters, also is this example above.
Will also inject all parameters from outer Provider.
@Connect({
customStore: {
name: 'lucy'
}
})
class App extends React.Component <any, any> {}Will also inject all parameters from outer Provider.
@Connect(state => {
return {
customName: 'custom' + state.store.name
}
})
class App extends React.Component <any, any> {}
ReactDOM.render(
<Provider store={{ name: 'bob' }}> <App /> </Provider>
, document.getElementById('react-dom'))class App extends React.Component <any, any> {
render() {
return (
<span>{this.props.store.name}</span>
)
}
}
const ConnectApp = Connect()(App)
// const ConnectApp = Connect({ ... })(App)
// const ConnectApp = Connect( state => { ... })(App)