RxConnect is like Redux's @connect, but with all the power of RxJS.
npm install --save rx-connect
You can find the latest documentation here: https://bsideup.gitbooks.io/rxconnect/content/
Replace this:
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0
}
}
componentWillMount() {
this.intervalRef = setInterval(
() => this.setState(state => ({ counter: state.counter + 1 })),
1000
)
}
componentWillUnmount() {
clearInterval(this.intervalRef)
}
render() {
return <div>{ this.state.counter }</div>
}
}with this:
import { rxConnect } from "rx-connect";
@rxConnect(
Rx.Observable.timer(0, 1000).timestamp()
)
class Timer extends React.PureComponent {
render() {
return <div>{ this.props.value }</div>
}
}NB: We use decorators, but it's not required. These two code blocks are completely identical:
@rxConnect(...) export class MyView extends React.Component { // ... }and
class MyView extends React.Component { // ... } export rxConnect(...)(MyView)
This library supports RxJS 5 by default, but provides an adapter for RxJS 4:
import { rxConnect } from "rx-connect";
import rx4Adapter from "rx-connect/lib/rx4Adapter";
rxConnect.adapter = rx4Adapter;