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: over 1 year 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 (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2019-01-21T14:03:34.000Z (over 7 years ago)
- Last Synced: 2025-03-16T03:45:29.426Z (over 1 year ago)
- Topics: flux, react, reactive, redux, rx, rxjs
- Language: JavaScript
- Homepage: https://bsideup.gitbooks.io/rxconnect/content/
- Size: 267 KB
- Stars: 84
- Watchers: 6
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
RxConnect
========
[](https://gitter.im/bsideup/rx-connect)
[](https://npmjs.com/package/rx-connect)
[](https://travis-ci.org/bsideup/rx-connect)
[]()
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;
```