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

Posted 2023-02-22

【中文标题】reactJS：具有通量的同构应用程序

【英文标题】：reactJS : isomorphic app with flux

【发布时间】：2015-11-09 02:07:25

【问题描述】：

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

【问题讨论】：

我还没有看到真正可靠的 isomorphic-react-flux 应用程序样板。尝试了很多，但似乎总是缺少一些东西。对于同构反应，我喜欢React Router Mega Demo。

您使用的是哪种服务器（Ruby、Python、Java、.NET、php、Nodejs）？

@khanetor 我正在使用 nodejs 服务器。我想知道如何将它与我所指的 git repo 集成

【参考方案1】：

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

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

以this store 为例，商店数据在第 7 行定义

var _products = , _cartVisible = false;

需要做的是将_products设置为其他一些数据之前你打电话给React.renderToString。这是通过 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 等功能，可帮助您填充您的商店，并在不调用操作或使任何公共访问者访问您的商店的情况下重置您的商店。 Alt 在设计时考虑了服务器端渲染。