Alternative to Observe for Sideways Data Loading

For reference. We’re exploring an alternative to the observe function proposed in #3398.

Instead of having a separate function that defines a list of dependencies on Observables, we could allow the render function itself trigger a bunch of side-effects that registers the currently executing component with some Observables.

render() {
  var data = request(this.props.url);
  if (data === null) return <div>Loading...</div>;
  return <div>{data}</div>;
}

Side-effects! 😲

The implementation of request wouldn’t return an Observable. Instead it would tell React that the currently executing component has a dependency on this Observable and needs to rerender anytime the subscription fires. It returns the last value received by this particular Observable… somehow.

function request(url) {
  return React.readAndSubscribe(Observable.fetch(url));
}

If an Observable is no longer subscribed to in the next render pass, it is automatically unsubscribed. Perhaps the Observable API is not ideal for this model.

[benlesh]

@sebmarkbage was showing @jayphelps this, and I think I mentioned it in short-form on Twitter… but providing this functionality would enable people to do something like the following (typical autocomplete example):

import { Component } from 'react';
import { boundSubject } from 'bound-subject-decorator';
import * as Rx from 'rxjs';

export default MyComponent extends Component {
  @boundSubject // binds the subject's handlers to the subject instance
  keypresses = new Subject();

  observe() {
    return {
      // compose keypresses into a throttle stream of async auto complete data
      autoCompleteData: this.keypresses
        .map((e) => e.target.value)
        .throttle(500)
        .switchMap(query => getSomeAjaxObservable(query))
    };
  }

  render() {
    return (
      <div>
        <input onKeyPress={this.keypresses.next}/>
        <ul>{this.data.autoCompleteData.map(x => (<li>{x}</li>))</ul>
      </div>
    );
  }
}

I’m not sure if I’d recommend people use this pattern, but they certainly could and it’s pretty ergonomic which is nice. I prefer mixing Redux and RxJS, myself, as I think it’s better architecturally.

[mweststrate]

@blesh indeed, standards are the best 😃. But as pointed out by @jimfb having observables / thennables in itself is not enough to solve the problem of over- or undersubscribing, nor does it allow for automatically subscribing to observables used by render.