https://github.com/bsideup/rx-connect

Glue your state and pure React components with RxJS
https://github.com/bsideup/rx-connect

flux react reactive redux rx rxjs

Last synced: 3 months ago
JSON representation

Glue your state and pure React components with RxJS

• Host: GitHub
• URL: https://github.com/bsideup/rx-connect
• Owner: bsideup
• License: mit
• Created: 2016-08-12T19:15:07.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-01-21T14:03:34.000Z (about 6 years ago)
• Last Synced: 2024-10-14T09:31:25.365Z (4 months ago)
• Topics: flux, react, reactive, redux, rx, rxjs
• Language: JavaScript
• Homepage: https://bsideup.gitbooks.io/rxconnect/content/
• Size: 267 KB
• Stars: 85
• Watchers: 6
• Forks: 16
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
RxConnect

========

[![Gitter](https://badges.gitter.im/bsideup/rx-connect.svg)](https://gitter.im/bsideup/rx-connect)

[![NPM version](https://img.shields.io/npm/v/rx-connect.svg)](https://npmjs.com/package/rx-connect)

[![Build Status](https://travis-ci.org/bsideup/rx-connect.svg?branch=master)](https://travis-ci.org/bsideup/rx-connect)

[![license](https://img.shields.io/github/license/bsideup/rx-connect.svg?maxAge=2592000)]()

RxConnect is like [Redux](https://github.com/reactjs/redux)'s `@connect`, but with all the power of [RxJS](https://github.com/Reactive-Extensions/RxJS).

```

npm install --save rx-connect

```

## Documentation

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

## Why?

Replace this:

```javascript

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 
{ this.state.counter }

    }

}

```


with this:

```javascript

import { rxConnect } from "rx-connect";

@rxConnect(

    Rx.Observable.timer(0, 1000).timestamp()

)

class Timer extends React.PureComponent {

    render() {

        return 
{ this.props.value }

    }

}

```


> **NB:** We use decorators, but it's not required. These two code blocks are completely identical:

>

> ```javascript

> @rxConnect(...)

> export class MyView extends React.Component {

>     // ...

> }

> ```

>

> and

>

>  ```javascript

> 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:

```js

import { rxConnect } from "rx-connect";

import rx4Adapter from "rx-connect/lib/rx4Adapter";

rxConnect.adapter = rx4Adapter;

```