如何动态 select 存储

Question

我正在尝试找出动态 select 组件的最佳方式，并根据我的服务器接收到的数据进行存储。该应用程序基于以下示例：https://github.com/yahoo/flux-examples/tree/master/fluxible-router 但略有不同：

用户访问我的站点。com/that/and/that（应用无法知道'that/and/that'是什么类型的东西，因此无法在路由中处理）。
服务器向我们的 CMS 发出 GET 请求。 CMS returns 数据，包括它是什么类型的数据（部分列表、文章、公司简介等）

这里我可以像这样动态地select一个组件（目前在父组件的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
}

一切顺利。但我也想将我的数据放在特定的存储中。最好的方法是什么？一些对我来说似乎有点 hacky 的想法：

在同一个 switch 语句中，动态执行一个动作将数据发送到适当的存储，'article' 组件将依赖 'article' 存储有数据。
将数据发送到组件本身并让（例如）文章组件使用该数据初始化文章存储。
实际上把文件类型放在URL，例如mysite.com/article/this/and/that 并在路由中巧妙地处理所有这些。但我不想因为无法找到一个优雅的解决方案而弄乱我的 URLs :)

提前感谢您的任何想法。

Answer 1

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

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

如何动态 select 存储

How to dynamically select store

reactjs-flux

fluxible