reactJS：具有通量的同构应用程序

Question

React-flux-cart。此示例仅包含用于响应的客户端代码。如何使它同构。哪些地方需要更改以包含节点并使其运行也像在服务器端一样。

Answer 1

如果你已经在使用 NodeJS，那么应该不会太难。

我假设您已经知道如何调用 React.renderToString 以在服务器上呈现标记。所以剩下要做的是呈现标记，该标记也显示来自商店的数据。

例如，如果您查看 this store，商店数据定义在第 7 行

var _products = {}, _cartVisible = false;

需要做的是在调用 React.renderToString 之前 将 _products 设置为一些其他数据 。这是通过 Flux 架构中的 Actions 完成的（请参阅第 15 行 here 如何调用操作）。

因此，在您调用 React.renderToString 之前，您必须调用它来填充您的商店：

var FluxCartActions = require('../actions/FluxCartActions');

var sku = 123123;
var update = {
  name: 'Scotch.io Signature Lager',
  price: 4.99,
  quantity: 1,
  type: '48oz bottle'
};

FluxCartActions.addToCart(sku, update);

其中 sku 和 update 可以是您想要的任何数据。

为了完整起见，您可以使用 ExpressJS 做一些事情

// server.jsx
var React = require('react');
var FluxCartActions = require('./reactCode/actions/FluxCartActions');
var FluxCartApp = require('./reactCode/components/FluxCartApp.react');
var app = require('express')();

app.get('*', function(req, res){
  var sku = 123123;
  var update = {
    name: 'Scotch.io Signature Lager',
    price: 4.99,
    quantity: 1,
    type: '48oz bottle'
  };
  FluxCartActions.addToCart(sku, update);
  var markup = React.renderToString(<FluxCartApp />);
  res.send(markup);
});

请注意，这是一个 .jsx 文件，因此请使用 babel require hook 在 NodeJS 中启用 JSX。

这很重要。在你有你的标记之后，你应该在你的下一个 http 请求之前清除你的商店，否则，你商店中以前的数据将持续存在并且对其他请求可见。

您应该看看 Alt，因为它们使使用 Flux 架构比在 Facebook 上实现更容易。它们还具有 bootstrap 和 flush 等功能，可帮助您填充商店，并在不调用操作或对商店进行任何 public 访问的情况下重置商店。 Alt 在设计时考虑了服务器端呈现。

reactJS：具有通量的同构应用程序

reactJS : isomorphic app with flux

reactjs

reactjs-flux

isomorphic-javascript