0

考虑一个基于 Flux 的同构应用程序，并使用 Fluxible 库来实现。您有一个 React 电子邮件应用程序，左侧是消息列表，右侧是当前打开的消息。

您的路由器在使用 URL '/message/123' 调用它时会触发 'SHOW_POST' 操作，并且该操作会加载数据、更新存储，因此消息会显示在右侧。这一切都有效，导航承诺得到解决并呈现页面。

但是，页面呈现时没有左侧的消息列表。如果在 SHOW_POST 期间调用 'LOAD_ALL_MESSAGES' 的操作，它们实际上并没有在服务器上呈现，服务器返回一个空列表并通过客户端上的 AJAX 加载它们。

如何在页面上填充其他组件需要的其他商店。我尝试在渲染需要它们的组件时调用操作来填充它们，这似乎不干净，并且不能解决组件未在服务器端渲染的问题。

在所有导航操作中必须触发其他操作来填充存储似乎同样不干净，因为可能不需要存储，代码将是重复的，因为我需要从几乎所有各种导航操作中调用这些填充操作。

在服务器端渲染期间填充后台存储的首选架构是什么。从每个导航中触发多个操作并等待它们全部解决？

4

1 回答 1

0

这是我遵循的方法，

  1. 此类路由的action方法（需要来自多个商店的数据）如下所示：

    动作：功能（上下文，有效负载，完成）{
  var getXData = new Promise(function(resolve){
    context.executeAction(getXDataAction, {}, 解决);
  });
  var getYData = new Promise(function(resolve){
    context.executeAction(getYDataAction, {}, resolve);
  });
  Promise.all([getXData, getYData]).then(function() { done() });
}

  2. 在这些操作中，我检查数据是否已经存在于相关商店中，以避免从外部获取它。

或者，您可以创建另一个action creator并将逻辑从路由移出到动作创建者。除了保持路线精简之外，我看不到它的真正好处。

于 2016-01-13T15:40:35.563 回答