React Router和RxJS数据流

Question

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

I subscribe to my data store with RxJS and pass it through the app as a prop:

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

bellow is how react-router normally renders it self:

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

This is what I have so far which is rendering react-router fine but the data appState doesn't go through <handler /> but it logs out fine prior to React.render

Router.run(routes, function (Handler) {
  Model.subject.subscribe((appState) => {
    console.log(appState); // the state passes here
    React.render(
      <Handler {...appState}/>, // the state doesn't pass here
      document.getElementById('app')
    );
  });
});

Now is there a way I can merge the RxJS data subscription and put it through React-Router?

SOLUTION

Here is the solution in full, pay attention to <Handler {...appState}/> which will pass the data into the app but you then need to pass that data via props <RouteHandler {...this.props} />

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>
    );
  }
});

var routes = (
  <Route name="app" path="/" handler={App}>
    <Route name="about" handler={About}/>
    <Route name="login" handler={Login}/>
    <DefaultRoute handler={Home}/>
  </Route>
);



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

Answer 1

Are you sure that your handlers are expecting props in the way that you are spreading them in the Handler component?

Either way, the way you've implemented it will only render anything if there's first a route change and then a change to the observable. If there's a route change but no subsequent observable change, nothing will be rendered.

You want to render both when a route change happens, and when a change happens in the observable. Try something like this instead:

var CurrentHandler = null;
var currentAppState = {};

Router.run(routes, function (Handler) {
  CurrentHandler = Handler;
  render();
});

Model.subject.subscribe((appState) => {
  currentAppState = appState;
  render();
});

function render() {
  // Cannot render before we have a handler
  if (!CurrentHandler) return;

  React.render(
    <CurrentHandler {...currentAppState} />,
    document.getElementById('app')
  );
}

EDIT

What you're doing is that you have an App component which is the parent route handler for your other handlers ( Home , Login and About ). So when the route changes to /login , your App component will be called, and it will get appState spread out as props. App then renders RouteHandler which then renders the Login component (since that's what the route matches). But Login won't get appState as props, because you're not passing them on from App .

If you change App to render <RouteHandler {...this.props} /> instead of <RouteHandler /> you will pass on all of App s props to RouteHandler which will then pass them on to Login .