Connect

Connect store and action to react component.

Simple Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 functions

Connect all

Connect all from Provider’s parameters, also is this example above.

Connect extra data

Will also inject all parameters from outer Provider.

1
2
3
4
5
6
@Connect({
    customStore: {
        name: 'lucy'
    }
})
class App extends React.Component <any, any> {}

Map state to props

Will also inject all parameters from outer Provider.

1
2
3
4
5
6
7
8
9
10
@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'))

Support stateless component

1
2
3
4
5
6
7
8
9
10
11
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)