reactJS: изоморфное приложение с потоком

Если вы уже используете NodeJS, это не должно быть слишком сложно.

Я предполагаю, что вы уже знаете, как вызывать React.renderToString для рендеринга разметки на сервере. Итак, что осталось сделать, так это отрисовать разметку, которая также отображает данные из хранилища.

Если вы посмотрите на этот магазин например, данные магазина определены в строке №7

var _products = {}, _cartVisible = false;

Что нужно сделать, так это установить _products на некоторые другие данные ДО вызова React.renderToString. Это делается с помощью Действий в архитектуре Flux (см., как вызывается действие здесь в строке №15).

Итак, прежде чем вы вызовете 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, чтобы включить JSX в NodeJS.

Это важно. После того, как у вас есть разметка, вы должны очистить свой магазин перед следующим http-запросом, в противном случае предыдущие данные в вашем магазине сохранятся и будут видны для других запросов.

Вы должны взглянуть на Alt, потому что они упрощают использование архитектуры Flux, чем реализация в Facebook. У них также есть такие функции, как bootstrap и flush, которые помогут вам заполнить ваш магазин и перезагрузить его, не вызывая действия или не делая каких-либо общедоступных доступа к вашему магазину. Alt разработан с учетом рендеринга на стороне сервера.