填充多个商店和等待

Question

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

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

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

如何在页面上填充其他组件所需的其他商店。当渲染需要它们的组件时，我尝试调用操作来填充它们，这看起来不干净，并且没有解决组件没有被渲染到服务器端的问题。

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

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

Answer 1

这是我遵循的方法，

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

   action: function (context, payload, done) {
     var getXData = new Promise(function(resolve){
       context.executeAction(getXDataAction, {}, resolve);
     });
     var getYData = new Promise(function(resolve){
       context.executeAction(getYDataAction, {}, resolve);
     });
     Promise.all([getXData, getYData]).then(function() { done() });
   }

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

或者，您可以创建另一个action creator，然后将逻辑从路径移动到动作创建者。除了保持你的路线精益之外，我不会看到真正的好处。