如何动态选择商店

Posted 2023-02-22

【中文标题】如何动态选择商店

【英文标题】：How to dynamically select store

【发布时间】：2015-07-22 13:44:17

【问题描述】：

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

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

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

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 语句中，动态执行一个动作以 将数据发送到适当的存储，“文章”组件将依赖 有数据的“文章”商店。

将数据发送到组件本身并让（例如）文章组件使用该数据初始化文章存储。

实际上将文档类型放在 URL 中，例如mysite.com/article/this/and/that 并在路线中巧妙地处理所有这些。但我宁愿不要因为找不到优雅的解决方案而弄乱我的网址：)

提前感谢您的任何想法。

【参考方案1】：

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

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