@vivy/rx-connect

RxConnect

RxConnect is like Redux's @connect, but with all the power of RxJS.

npm install --save rx-connect

Documentation

You can find the latest documentation here: http://bsideup.gitbooks.io/rxconnect/content/

Why?

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)

Using RxJS 4?

This library supports RxJS 5 by default, but provides an adapter for RxJS 4:

import { rx4Connect } from "rx-connect";
import rx4Adapter from "rx-connect/lib/rx4Adapter";
rx4Connect.adapter = rx4Adapter;