0

React-flux-cart . この例には、react のクライアント側コードのみが含まれています。同形にする方法。ノードを含めてサーバー側でもそのまま実行するために変更が必要な場所は何ですか。

4

1 に答える 1

1

すでに NodeJS を使用している場合、それほど難しくはありません。

React.renderToString を呼び出してサーバー上でマークアップをレンダリングする方法を既に知っていると思います。残された作業は、ストアからのデータも表示するマークアップをレンダリングすることです。

たとえば、このストアを見ると、ストア データは 7 行目で定義されています。

var _products = {}, _cartVisible = false;

行う必要があるのは、呼び出す前に他_productsのデータに設定することです。これは、Flux アーキテクチャのアクションを介して行われます (ここの 15 行目でアクションがどのように呼び出されるかを参照してください)。React.renderToString

したがって、 を呼び出す前に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 フックを使用して NodeJS で JSX を有効にします。

これは重要です。マークアップを取得したら、次の http リクエストの前にストアをクリアする必要があります。そうしないと、ストア内の以前のデータが保持され、他のリクエストで表示されます。

Facebook での実装よりも Flux アーキテクチャの使用が容易になるため、 Altを検討する必要があります。bootstrapまた、 やなどの関数もあり、ストアにデータflushを入力したり、アクションを呼び出したり、ストアへのパブリック アクセサーを作成したりせずにストアをリセットしたりできます。Alt は、サーバー側のレンダリングを念頭に置いて設計されています。

于 2015-08-17T14:23:37.667 に答える