Question

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

Answer 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，因为它们比使用Facebook的实现更容易使用Flux架构。它们还具有bootstrap和flush等功能，可帮助您填充商店，重置商店，而无需调用操作或为商店设置任何公共访问者。 Alt的设计考虑了服务器端渲染。

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

1 个答案: