我正在尝试从服务器上获得的许多项目实现无限滚动,但我找不到任何正确的方法来保持通量架构设计规则。
这个想法是:在第一次加载时,我从服务器(只有id)获得一个完整的项目列表,然后使用ajax我每次获取20个项目。
列表保存在商店中,也包含已加载的商品。视图侦听已加载的项目并对其进行渲染,当它到达滚动底部时,它会调用一个操作,然后再获取20个项目,依此类推。
问题是:操作应该知道要获取的项目,卸载的项目列表在商店中,所以它必须直接从商店获取,这是“不要这是另一种选择是处理商店中的所有逻辑,这似乎也是一个坏主意。
任何人都可以想到一个很好的解决方案吗?
答案 0 :(得分:1)
更新:在单向流程中,组件直接从商店读取是可以的(见下文)
让您的操作明确说明要抓取的项目:"请给我21-40项目"。 这会触发a)(异步)ajax调用以获取项目21-40和b)调度到商店。 组件知道a)它已经呈现了哪些项目,以及b)用户想要看到的项目,因此它可以传递上述操作消息而无需再次与商店交谈。
商店收到请求。商店知道它还没有物品。该组件尚不清楚。 存储发出更改,您的组件(假设它正在侦听存储更改)从存储获取当前状态。如果物品不在那里,则商店提供装载状态("装载物品21-40"或类似物品)。该组件显示加载状态。 (或者,如果加载的项目已经完全存储,则只需呈现项目21-40)。
只要商品21-40通过ajax退货发货,您的商店就会更新完整商品21-40。 (如果他们碰巧已经在商店,没有问题,没有更新)。商店发出另一个变化。组件听到这个并重新渲染。
ASIDE: 单向流程用于更新: 组件 - >较低的组件 - >动作( - > webAPI - >动作) - >调度员 - >商店 - >部件
单向流规则是:
允许组件收听商店更改并直接从商店提取/读取数据。
商店收听调度员,如果他们收到调度员的新闻,则更新。
商店在更新后立即发出更改,以便任何侦听组件都可以执行某些操作(通常是读取新数据)(参见4.)
来自服务器的WebAPI结果是" actions"。他们通过调度员通知相关商店更新。 (见5)
如果出现以下情况,单向流中断:
如果(虽然有些人不同意)也会打破: