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 。