Flux：具有相同存储，不同状态的多个容器

Question

我有两个Flux Containers（CustomerList），它们基本上是可过滤的，客户实体的分页列表。它们在同一页面中呈现，但过滤器是独立的。每当我更改过滤器或推进页面时，我都需要通过Action Creators向服务器发出请求，然后激活Dispatcher并更新CustomerStore，它会触发事件并更新容器。

如果存储器应该是Flux中的单例（如果calculateState是静态方法），如何保留同一组件的两个实例，而其中一个实例不会覆盖另一个的内容？

Answer 1

根据您的描述，我理解：

• 您拥有 一个 flux CustomerStore，其中包含所有客户
• 和 两个 <CustomerList>组件实例，每个实例从CustomerStore获取数据
• 但他们每个人都需要从CustomerStore
获取不同的数据

在这样的设置中，您可以：

• 针对<CustomerList>的每个实例 - 保存组件<CustomerList>状态下的所有过滤器设置。
• 在您的组件从商店中提取数据后（通过一些getStateFromStores()调用），从状态应用过滤器，以仅呈现过滤后的结果

然后您的（单件）CustomerStore将包含来自两个实例的Ajax调用的服务器响应的并集，每个实例获取所有客户记录，但每个实例仅显示应用的自己的过滤器。 在一个例子中：

• CustomerStore为空
• <CustomerList>实例1和实例2都显示第1页
• <CustomerList>实例1触发第2页＆＃39;动作
• 服务器（第2页客户）的结果已添加到CustomerStore
• CustomerStore mits change
• <CustomerList> 1获取整个商店内容，仅显示第2页
• <CustomerList> 2获取整个商店内容，仅显示第1页
• <CustomerList> 2设置过滤到“仅限新客户”＆＃39;和火灾行动
• 服务器（第2页以外的新客户）的结果已添加到CustomerStore
• <CustomerList> 1获取整个商店内容，仅显示第2页（与之前的呈现无关）
• <CustomerList> 2获取整个商店内容，仅显示新客户（因为过滤器包含超出第2页的新客户）