Skip to content

Instantly share code, notes, and snippets.

@tyrchen

tyrchen/rxjs-react.js

Forked from nicolashery/rxjs-react.js
Created September 29, 2015 23:33
Download ZIP

Revisions

  1. @nicolashery nicolashery revised this gist May 16, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions rxjs-react.js
    View file
    Original file line number Diff line number Diff line change
    @@ -37,9 +37,9 @@ class App extends React.Component {
    .do(console.log.bind(console, 'requested'))
    .flatMapLatest(query => api.getData$(query).map(_.identity))
    .do(console.log.bind(console, 'updated'))
    .subscribe(response => this.setState({
    .subscribe(data => this.setState({
    loading: false,
    responses: this.state.responses.concat(response)
    data: data
    }));
    }

  2. @nicolashery nicolashery revised this gist May 16, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions rxjs-react.js
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@ let api = {
    .end((err, resp) => cb(err, resp && resp.body));
    },

    getData: Rx.Observable.fromNodeCallback(api.getData.bind(api))
    getData$: Rx.Observable.fromNodeCallback(api.getData.bind(api))
    };

    class App extends React.Component {
    @@ -35,7 +35,7 @@ class App extends React.Component {
    .do(() => this.setState({loading: true}))
    .throttle(400)
    .do(console.log.bind(console, 'requested'))
    .flatMapLatest(query => api.getCompanies$(query).map(_.identity))
    .flatMapLatest(query => api.getData$(query).map(_.identity))
    .do(console.log.bind(console, 'updated'))
    .subscribe(response => this.setState({
    loading: false,
  3. @nicolashery nicolashery created this gist May 16, 2015.
    69 changes: 69 additions & 0 deletions rxjs-react.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    import React from 'react';
    import _ from 'lodash';
    import Rx from 'rx';
    import superagent from 'superagent';

    let api = {
    host: 'http//localhost:3001',

    getData(query, cb) {
    superagent
    .get(this.host + '/data')
    .accept('json')
    .query(query)
    .end((err, resp) => cb(err, resp && resp.body));
    },

    getData: Rx.Observable.fromNodeCallback(api.getData.bind(api))
    };

    class App extends React.Component {
    constructor(props) {
    super(props)
    this.state = {
    token: 1,
    loading: false,
    data: {}
    };
    }

    componentWillMount() {
    this.intent$ = new Rx.Subject();

    this.intent$
    .do(console.log.bind(console, 'clicked'))
    .do(() => this.setState({loading: true}))
    .throttle(400)
    .do(console.log.bind(console, 'requested'))
    .flatMapLatest(query => api.getCompanies$(query).map(_.identity))
    .do(console.log.bind(console, 'updated'))
    .subscribe(response => this.setState({
    loading: false,
    responses: this.state.responses.concat(response)
    }));
    }

    componentWillUnmount() {
    this.intent$.dispose();
    }

    render() {
    return (
    <div>
    <p>{this.state.loading ? 'loading...' : '.'}</p>
    <p>
    <button onClick={this.handleClick.bind(this)}>click me</button>
    <strong>{` ${this.state.token}`}</strong>
    </p>
    <pre>{JSON.stringify(this.state.data)}</pre>
    </div>
    );
    }

    handleClick() {
    this.intent$.onNext({token: this.state.token});
    this.setState({token: this.state.token + 1});
    }
    }

    React.render(<App />, document.getElementById('app'));