Question

我正在尝试找出根据我的服务器接收的数据动态选择组件和存储的最佳方法。该应用基于以下示例：https://github.com/yahoo/flux-examples/tree/master/fluxible-router但有点不同：

用户访问mysite.com/that/and/that（应用程序无法知道'/和/那是什么类型的东西，所以这在路由中无法处理）。
服务器向我们的CMS发出GET请求。 CMS返回数据，包括数据类型（部分列表，文章，公司简介等）

在这里我可以像这样动态选择一个组件（现在这是在父组件的render方法中）：

switch (this.props.documentType) { // From the CMS
    case 'Section':
        Handler = require('../section/section');
        break;
    case 'Article':
        Handler = require('../article/article');
        break;
    default:
        // Do nothing
}

一切都好。但我也想把我的数据放在一个特定的商店里。最好的方法是什么？有些想法对我来说似乎有些苛刻：

在同一个switch语句中，动态执行动作将数据发送到相应的商店，'article'组件将依赖 'article'商店有数据。
将数据发送到组件本身，让（例如）文章组件使用该数据初始化文章商店。
实际上将文档类型放在URL中，例如mysite.com/article/this/and/that并在路线中整齐地处理这一切。但我不想因为无法找到优雅的解决方案而弄乱我的网址。）

提前感谢任何想法。

Answer 1

这是让React呈现在服务器上完全同步的一个不幸的限制：关于要呈现哪些组件的决定发生得太晚，以至于您无法提前加载数据。出于这个原因，我们经常移动决定哪个组件在父组件之外呈现，而是使映射静态（通过配置）或由操作执行的单独方法。通过这种方式，操作调用该函数或检查静态映射，确定将使用哪一个，并调用另一个操作来获取数据。然后，该操作可以将数据和要使用的组件分派到商店。然后该组件从商店获取子项并动态呈现它。

这不是一个理想的解决方案，它可能违反了一些Flux原则，但它是我们发现的唯一能让我们正确地在服务器上动态加载组件的东西。

如何动态选择商店

1 个答案: