使用通量商店

Posted

技术标签:

【中文标题】使用通量商店【英文标题】:Using Flux stores 【发布时间】:2016-07-22 06:33:52 【问题描述】:

我正在做一个只进行了很短时间的项目。管理应用程序状态的不同方面并且相对独立的通量存储已经很少。

我有两个问题:

现有的一些商店会发出不止一种类型的更改事件。这是否表明商店处理了太多不相关的数据,应该在不同的商店中,还是这是一种常见的情况?

我们需要编写一个 React 组件,它依赖于多个已经存在的 store,并且还需要查询服务器以获取一些特定信息以呈现在页面上,然后它将允许用户修改.所以,在这个组件可以渲染之前,它需要确保所有的商店都包含他们需要的东西,并发出行动来填充任何缺失的东西。我的问题是关于如何处理这个问题。最好创建一个新的存储来获取组件所需的特定数据并依赖于其他存储(使用通常的通量存储依赖规则),或者让组件知道它直接依赖于哪些特定存储。

【问题讨论】:

【参考方案1】:

对于您问题的第一部分:这取决于。 Flux 不会强迫你遵守一套严格的规则。例如Redux,所有东西都只使用一个商店。我从事的项目几乎所有组件都有自己的商店,而另一个我们每个视图都有一个商店来处理数据模型和所有其他状态。在不了解您的项目的细节(规模、复杂性等)的情况下,我不能推荐其中一个。我可能会选择对您和您的团队有意义的最少数量的商店,并根据需要进行重构(即,当您觉得它处理太多或单个文件包含太多无关代码时)。无论哪种方式最适合您的情况并让您感到最舒适。

对于其他部分:由于您希望组件仅在填充所有商店的数据后才呈现,我将引入新的商店来处理服务器数据并使用 Dispatcher 的 waitFor 方法来定义依赖关系。如果您选择直接使用存储,则可以使用某种初始状态渲染组件,并在丢失或禁用用户编辑的部分上加载微调器,一旦获取数据,更新状态以显示其余数据/启用编辑。这需要更多代码,但可以带来更好的用户体验。同样,这完全取决于您的需求。

【讨论】:

以上是关于使用通量商店的主要内容,如果未能解决你的问题,请参考以下文章

通量商店改变其他商店

通量/反应:如何处理商店中过滤的 api 数据

没有动作和调度程序的通量?

通量商店 - 单元测试

在使用通量架构完成 ajax 请求后更新 reactjs 上下文

React.js - 通量与全局事件总线