通量:多个容器具有相同的存储，不同的状态

Flux: multiple containers with same store, different state

本文关键字：存储 状态 通量      更新时间：2024-06-20

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

如果Stores应该是Flux中的singleton（如果calculateState是一个静态方法），我如何保持同一组件的两个实例，而不让其中一个覆盖另一个的内容？

根据您的描述，我理解：

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

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

  • 对于<CustomerList>的每个实例，将所有过滤器设置保存在组件<CustomerList>的状态中
  • 组件从存储中获取数据后（通过某种getStateFromStores()调用），应用state中的筛选器，以仅呈现筛选后的结果

然后，您的（singleton）CustomerStore将包含来自两个实例的Ajax调用的服务器响应的并集，每个实例获取所有客户记录，但每个实例只显示应用的自己的筛选器
例如：

  • CustomerStore为空
  • <CustomerList>实例1和实例2都显示页面1
  • <CustomerList>实例1触发"获取页面2"操作
  • 来自服务器（第2页客户）的结果将添加到CustomerStore
  • CustomerStore限制更改
  • <CustomerList> 1获取整个存储内容，只显示第2页
  • <CustomerList> 2获取整个存储内容，只显示第1页
  • <CustomerList> 2将筛选器设置为"仅限新客户"并启动操作
  • 来自服务器的结果（第2页之后的新客户）将添加到CustomerStore
  • <CustomerList> 1获取整个存储内容，并且只显示第2页（与以前的呈现没有变化）
  • <CustomerList> 2获取整个商店内容，并且只显示新客户（因为过滤器包括第2页以外的新客户）
相关文章：