React Router和RxJS数据流

Question

我有一个React App，数据流由RxJS驱动-> 这里

我使用RxJS订阅了我的数据存储，并将其作为道具通过应用传递：

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

下面是react-router通常如何自我呈现：

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

到目前为止，这就是我使appState -Router正常显示的内容，但是数据appState并未通过<handler />进行<handler />但在React.render之前可以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')
    );
  });
});

现在有一种方法可以合并RxJS数据订阅并将其通过React-Router放置吗？

解

这是完整的解决方案，请注意<Handler {...appState}/> ，它将把数据传递到应用程序中，但是您随后需要通过props <RouteHandler {...this.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

您确定您的处理程序正在以在Handler组件中传播道具的方式期望道具吗？

无论哪种方式，您实现的方式都只会在首先更改路线然后更改可观察对象的情况下呈现任何内容。 如果发生路线更改，但随后没有可观察到的更改，则不会呈现任何内容。

您希望在发生路线更改时以及可观察对象中发生更改时都呈现。 尝试这样的事情：

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

编辑

您正在做的是拥有一个App组件，该组件是其他处理程序（ Home ， Login和About ）的父路由处理程序。 因此，当路由更改为/login ，将调用您的App组件，并将appState作为appState散布开。 然后， App渲染RouteHandler ，然后渲染Login组件（因为这就是路由所匹配的）。 但是Login不会将appState用作道具，因为您不是从App传递它们。

如果将App更改为呈现<RouteHandler {...this.props} />而不是<RouteHandler /> ，则将所有App道具传递给RouteHandler ，然后将其传递给Login 。