服务器端React与纯组件

Question

我正在尝试构建一个符合最佳实践的同构React应用程序。我目前只是想为服务器找到一个好的系统。以下是我的一些要求：

要求

• 我想使用react-router
• 我正在努力避免使用磁通架构，因为它对我的简单应用来说太过分了
• 我希望我的React组件是纯粹的，因此它们不应该将模型数据存储在其内部状态
• React组件也应该不获取他们自己需要的数据，这些数据应该通过props
传递给他们
• 如果组件需要异步加载数据，那么应该在渲染之前在服务器上进行

简单样本申请

我做了一个小样本应用程序，用来说明我的问题/困惑：https://github.com/maximilianschmitt/ipman

基本上，组件树如下所示：

RouteHandler
  App
    RouteHandler
      Home
      Ip

routes.js

'use strict';

const Router = require('react-router');
const App = require('./components/app');
const Home = require('./components/home');
const Ip = require('./components/ip');
const Route = Router.Route;

const routes = (
  <Route handler={App}>
    <Route name="home" path="/" handler={Home} />
    <Route name="ip" path="/ip" handler={Ip} />
  </Route>
);

module.exports = routes;

组件/ ip.js

class Ip extends React.Component {
  render() {
    return <div>Your ip is: {this.props.ip || 'undefined'}</div>;
  }
}

我的问题/任务是：

• 如果我导航到/ip，我希望服务器从http://ip.jsontest.com请求自己的IP地址，以某种方式将其传递给Ip组件，然后将所有内容渲染为字符串让客户看到HTML。
• 我想我想避免在组件内部发出HTTP请求，我希望通过props
来传递必要的信息

我理解像alt.js这样的库和其他同构的通量实现通过商店的概念来解决这个问题，但我想知道这是不是有点矫枉过正。

是否有一种简单的方法可以添加所需的功能？

Answer 1

基于this article from react-router，我得到了一些似乎不是一个糟糕的解决方案。您可以在此处找到结果：https://github.com/maximilianschmitt/server-side-react