Javascript 通量：具有相同存储、不同状态的多个容器

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

---

如果存储被认为是不断变化的单例（如果

calculateState

是一种静态方法），我如何保持同一组件的两个实例，而不让其中一个覆盖另一个的内容呢？

根据您的描述，我理解：

• 您有一个flux CustomerStore，它容纳所有客户
• 和两个组件实例，每个实例从CustomerStore获取数据
• 但他们每个人都需要从CustomerStore获取不同的数据

在这种设置中，您可以：

• 对于
  的每个实例-将所有过滤器设置保存在组件的状态

• 组件从存储中获取数据后（通过一些

  getStateFromStores（）

  调用），从状态应用过滤器，仅呈现过滤后的结果

然后，您的（单例）CustomerStore将包含来自两个实例的Ajax调用的服务器响应的联合，每个实例获取所有客户记录，但每个实例仅显示其应用的过滤器。
例如：

• CustomerStore是空的

• 实例1和实例2都显示第1页

• 实例1触发“获取第2页”操作
• 来自服务器（第2页客户）的结果将添加到CustomerStore
• 客户商店mits更改

• 1获取整个商店内容，仅显示第2页

• 2获取整个存储内容，仅显示第1页

• 2将过滤器设置为“仅限新客户”并启动操作
• 来自服务器（第2页以外的新客户）的结果将添加到CustomerStore

• 1获取整个存储内容，并仅显示第2页（与上一次渲染没有更改）

• 2获取整个商店内容，并仅显示新客户（因为过滤器包括第2页以外的新客户）