React Router 和 RxJS 数据流

Question

我有一个 React 应用程序，其数据流由 RxJS 驱动 -> here

我使用 RxJS 订阅了我的数据存储并将其作为 prop 通过应用程序传递：

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

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

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

这是我目前所拥有的，它可以很好地渲染 react-router 但数据 appState 没有通过 <handler /> 但它在 React.render[ 之前可以正常注销=20=]

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} />

传递该数据

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 作为 props 展开。 App 然后呈现 RouteHandler 然后呈现 Login 组件（因为这是路由匹配的内容）。但是 Login 不会得到 appState 作为道具，因为你没有从 App.

传递它们

如果您将 App 更改为呈现 <RouteHandler {...this.props} /> 而不是 <RouteHandler />，您会将所有 App 的道具传递给 RouteHandler，然后传递给 RouteHandler他们到 Login.

React Router 和 RxJS 数据流

React Router and RxJS data flow

javascript

rxjs

reactjs

react-router

解决方案