javascript - React + Flux 和服务端渲染？ (同构 React + Flux)

Question

使用同构应用程序设置应用程序初始状态的一般做法是什么？如果没有 Flux，我会简单地使用类似的东西:

var props = { }; // initial state
var html = React.renderToString(MyComponent(props);

然后通过 express-handlebars 呈现该标记并通过 {{{reactMarkup}} 显示。

在客户端设置初始状态我会做这样的事情:

if (typeof window !== 'undefined') {
    var props = JSON.parse(document.getElementById('props').innerHTML);
    React.render(MyComponent(props), document.getElementById('reactMarkup'));
}

所以是的，基本上您在服务器和客户端上设置了两次状态，但是 React 会比较差异并且在大多数情况下不会通过重新渲染影响性能。

---

当您在 Flux 架构中有操作和存储时，这个原则如何运作？在我的组件中我可以做:

getInitialState: function() {
  return AppStore.getAppState();
}

但现在如何从服务器设置 AppStore 中的初始状态？如果我使用没有传递属性的 React.renderToString 它将调用 AppStore.getAppState() ，它不会有任何东西，因为我仍然不明白我怎么会在服务器上设置我商店的状态？

2015 年 2 月 5 日更新

我仍在寻找一个干净的解决方案，不涉及使用第三方 Flux 实现，例如 Fluxible、Fluxxor、Reflux。

2016 年 8 月 19 日更新

使用Redux .

Answer 1

看看dispatchr和雅虎的相关图书馆。

大多数 flux 实现在 node.js 中不起作用，因为它们使用单​​例存储、调度程序和操作，并且没有“我们完成了”的概念，需要知道何时呈现为 html 并响应请求。

Yahoo 的库，如 fethr 和 routr，通过使用一种非常纯粹的依赖注入(inject)形式(没有参数名称或类似的解析函数)来绕过节点的这种限制。

相反，您在 services/todo.js 中定义这样的 api 函数:

create: function (req, resource, params, body, config, callback) {

在 actions/createTodo.js 中这样的操作:

module.exports = function (context, payload, done) {
    var todoStore = context.getStore(TodoStore);
...
context.dispatch('CREATE_TODO_START', newTodo);
...
context.service.create('todo', newTodo, {}, function (err, todo) {

最后一行间接调用了services/todo.js中的create函数。在这种情况下，间接可能意味着:

• 在服务器上:
  • 当您在服务器上时，fetchr 会填充额外的参数
  • 然后调用您的回调
• 在客户端:
  • fethr 客户端发出 http 请求
  • 服务器上的 fetchr 拦截了它
  • 它使用正确的参数调用服务函数
  • 它将响应发送回客户端 fethr
  • 客户端 fethr 处理调用你的回调

这只是冰山一 Angular 。这是一组非常复杂的模块，它们协同工作以解决棘手的问题并提供可用的 api。在现实世界的用例中，同构本质上是复杂的。这就是为什么许多 flux 实现不支持服务器端渲染的原因。

您可能还想研究不使用助焊剂。它对所有应用程序都没有意义，而且通常只是妨碍。大多数情况下，如果有的话，您只需要在应用程序的几个部分使用它。编程中没有 Elixir !