rxjs-react-component
A component allowing you to change state using observables
Install
npm install rxjs-react-component
Depends on React and rxjs
Howto
By convention all methods defined with a $ at the end will expose an observable instead. If you return the observable it is expected to map to an object. This object will be run with this.setState(mappedObservableObject) and cause a render on the component.
import React from 'react';
import ObservableComponent from 'rxjs-react-component';
class MyComponent extends ObservableComponent {
constructor(props) {
super(props);
this.state = {count: 0};
}
onClick$(observable) {
return observable.map(() => ({count: this.state.count + 1}));
}
render() {
return (
<div>
<h1>Hello world ({this.state.count})</h1>
<button onClick={this.onClick$}>Increase</button>
</div>
);
}
}You can create complex state changes by merging multiple observables.
import React from 'react';
import ObservableComponent from 'rxjs-react-component';
import {Observable} from 'rxjs';
class MyComponent extends ObservableComponent {
constructor(props) {
super(props);
this.state = {count: 0};
}
onClick$(observable) {
const increase$ = observable.map(() => ({count: this.state.count + 1}));
const delayedIncrease$ = observable.delay(200).map(() => ({count: this.state.count + 1}));
return Observable.merge(
increase$,
delayedIncrease$
);
}
render() {
return (
<div>
<h1>Hello world ({this.state.count})</h1>
<button onClick={this.onClick$}>Increase</button>
</div>
);
}
}You can also hook on to life-cycle hooks using the same naming convention. Not all of these should cause a new render of the component and you handle that by just not returning the observable.
import React from 'react';
import ObservableComponent from 'rxjs-react-component';
class MyComponent extends ObservableComponent {
componentWillUpdate$(observable) {
observable.forEach({nextProps} => console.log(nextProps));
}
render() {
return (
<div>
<h1>Hello world</h1>
</div>
);
}
}