stream-components

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 { rxConnect } from 'rx-connect';
import rx4Adapter from 'rx-connect/lib/rx4Adapter';
rxConnect.adapter = rx4Adapter;