Flux-无限滚动:我想不出如何坚持单向数据流

时间:2015-10-24 08:37:17

标签: reactjs-flux flux

我正在尝试从服务器上获得的许多项目实现无限滚动,但我找不到任何正确的方法来保持通量架构设计规则。

这个想法是:在第一次加载时,我从服务器(只有id)获得一个完整的项目列表,然后使用ajax我每次获取20个项目。

列表保存在商店中,也包含已加载的商品。视图侦听已加载的项目并对其进行渲染,当它到达滚动底部时,它会调用一个操作,然后再获取20个项目,依此类推。

问题是:操作应该知道要获取的项目,卸载的项目列表在商店中,所以它必须直接从商店获取,这是“不要这是另一种选择是处理商店中的所有逻辑,这似乎也是一个坏主意。

任何人都可以想到一个很好的解决方案吗?

1 个答案:

答案 0 :(得分:1)

更新:在单向流程中,组件直接从商店读取是可以的(见下文)

让您的操作明确说明要抓取的项目:"请给我21-40项目"。 这会触发a)(异步)ajax调用以获取项目21-40和b)调度到商店。 组件知道a)它已经呈现了哪些项目,以及b)用户想要看到的项目,因此它可以传递上述操作消息而无需再次与商店交谈。

商店收到请求。商店知道它还没有物品。该组件尚不清楚。 存储发出更改,您的组件(假设它正在侦听存储更改)从存储获取当前状态。如果物品不在那里,则商店提供装载状态("装载物品21-40"或类似物品)。该组件显示加载状态。 (或者,如果加载的项目已经完全存储,则只需呈现项目21-40)。

只要商品21-40通过ajax退货发货,您的商店就会更新完整商品21-40。 (如果他们碰巧已经在商店,没有问题,没有更新)。商店发出另一个变化。组件听到这个并重新渲染。

ASIDE: 单向流程用于更新: 组件 - >较低的组件 - >动作( - > webAPI - >动作) - >调度员 - >商店 - >部件

单向流规则是:

  1. 允许组件仅将数据更新推送到 lower 组件(通过传递新的道具,触发重新渲染),而不是更高的组件
  2. 允许组件保持内部状态,可以将其作为道具传递给儿童(参见1)
  3. 允许组件将数据更新或更新请求也推送到调度程序(在" actions"中)。然后,调度员通过例如webAPI将更新转发到商店和/或某些服务器。
  4. 允许组件收听商店更改并直接从商店提取/读取数据。

  5. 商店收听调度员,如果他们收到调度员的新闻,则更新。

  6. 商店也可以收听其他商店,并从其他商店读取数据以自行更新
  7. 商店在更新后立即发出更改,以便任何侦听组件都可以执行某些操作(通常是读取新数据)(参见4.)

  8. 来自服务器的WebAPI结果是" actions"。他们通过调度员通知相关商店更新。 (见5)

  9. 如果出现以下情况,单向流中断:

    • 组件主动从较高组件中提取/提取数据 - 此类数据应由较高组件作为道具推送(参见1)
    • 组件主动从子级获取数据 - 作为父级,组件应该已经拥有此数据。如果它处于孩子的状态,则状态设计得太低。
    • 组件直接更新商店 - 应该通过调度程序执行操作

    如果(虽然有些人不同意)也会打破:

    • 商店直接更新另一家商店 - 应该是拉而不是推(见6)
    • 商店通过操作推送更新 - 只允许webAPI(参见8)和组件(参见3)发布操作
    • 组件直接执行webAPI请求并处理结果状态 - 应该通过调度程序