Rx pushing data through React-Router

I have a react App with the data flow being driven by RxJS -> here

Short of it is I subscribe to my data store which I then pump through via the props:

Model.subject.subscribe((appState) => {
  React.render(
    <App {...appState}/>,
    document.getElementById('app')
  );
});

Now is there a way I can merge the above subscription into the Router.run…?

Router.run(routes, function (Handler) {
  React.render(
    <Handler />,
    document.getElementById('app')
  );
});

I’ve tried the bellow the router still works but the appState isn’t been passed through!!

 Model.subject.subscribe((appState) => {
  Router.run(routes, function (Handler) {
    React.render(
      <Handler {...appState}/>,
      document.getElementById('app')
    );
  });
});

Any pointers would be superb thanks 😃

[BerkeleyTrue]

What you want is a for an observer to be notified when both Router.run and Model.subject publish new values.

This calls for… combineLatest!

First, make Router.run into an observable

const RouterObs = Rx.Observable.create(observer => {
    Router.run(routes, location, (Handler, state) => {
      observer.onNext({ Handler, state });
    });
  });
};

Now sprinkle in a dash of combineLatest!

const subscription = Rx.Observable.combineLatest(
  Model.subject,
  RouterObs,
  function((appState, { Handler, State }) => ({
    appState,
    Handler,
    State
  }))
  .subscribe(({ appState, Handler, State }) => {
    React.render(
      <Handler {...appState}/>,
      document.getElementById('app')
    );
  });
});

Bam! Rx-ified Router Soup!

Hope that answers your question.

P.S. Adds some spice by introducing flatMap and Rx-ifying render ala Thundercats.js (disclaimer: I am the author of Thundercats)

const ObservableRender = new Rx.AnonymousObservable(function (observer) {
    let instance = null;
    instance = React.render(Comp, DOMContainer, (err) => {
      if (err) { return observer.onError(err); }
      if (instance) { observer.onNext(instance); }
    });
    observer.onNext(instance);
  });
});

const subscription = Rx.Observable.combineLatest(
  Model.subject,
  RouterObs,
  function((appState, { Handler, State }) => ({
    appState,
    Handler,
    State
  }))
  .flatMap(({ appState, Handler, State }) => {
    return ObservableRender(
      <Handler {...appState}/>,
      document.getElementById('app')
    );
  })
  .subscribe(reactRoot => {
    console.log('booya! React rendered!');
  });
});

[Cmdv]

so solution sat up in <RouteHandler {...this.props} /> so you can pass your state into the handler then you need to call it’s props to pass to the rest of the app there.

var App = React.createClass({
  render: function () {
    return (
      <div>
        <header>
          <ul>
            <li><Link to="app">Home</Link></li>
            <li><Link to="about">About</Link></li>
            <li><Link to="login">Login</Link></li>
          </ul>
        </header>
        <RouteHandler {...this.props} />
      </div>
    );
  }
});