reactjs-flux - Flux- 无限滚动 : i cannot think of how to stick to unidirectional data flow

Question

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

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

列表保存在 Store 中，加载的项目也是如此。 View 监听加载的项目并呈现它们，当它到达滚动底部时它调用一个 Action ，然后应该获取 20 个以上的项目，依此类推。

问题是:Action应该知道要取什么items，卸载的items列表在store里面，所以它必须直接从store中获取，这是一个“不要”不断变化。其他替代方案是处理商店中的所有逻辑，这似乎也是一个坏主意..

谁能想出一个好的解决方案？

Answer 1

更新:在单向流中，组件可以直接从存储中读取(见下文)

让您的操作明确说明要获取哪些项目:“请给我项目 21-40”。这将触发 a)(异步)ajax 调用以获取项目 21-40 和 b) 发送到商店。该组件知道 a) 它已经渲染了哪些项目，以及 b) 用户接下来想看到哪些项目，因此它可以传递上述操作消息而无需再次与商店对话。

商店收到请求。商店知道它还没有这些元素。该组件还不知道。Store 发出变化，你的组件(假设它正在监听 store 变化)从 store 获取当前状态。如果项目不存在，则商店提供加载状态(“加载项目 21-40”或类似的)。该组件显示加载状态。 (或者，如果加载的项目已经完全存储，它只呈现项目 21-40)。

一旦商品 21-40 通过 ajax 返回交付，您的商店就会更新为完整的商品 21-40。 (如果他们碰巧已经在商店里，没问题，没有更新)。 Store 发出另一个变化。组件听到这个，并重新渲染。

旁白:单向流用于更新:组件 -> 底层组件 -> 操作(-> webAPI -> 操作) -> 调度程序 -> 存储 -> 组件

单向流规则是:

1. 允许组件仅将数据更新推送到低级组件(通过传递触发重新渲染的新 Prop )，而不是高级组件
2. 允许组件保持内部状态，它们可以将其作为 props 传递给子级(参见 1)
3. 允许组件将数据更新或更新请求也推送到调度程序(在“操作”中)。然后，调度程序通过例如 webAPI 将更新转发到商店和/或某些服务器。

4. 允许组件监听存储更改并直接从存储中提取/读取数据。

5. 商店监听调度员，并在收到调度员的消息时更新。

6. 商店也可以监听其他商店，并从其他商店读取数据以更新自己

7. 存储在更新后立即发出更改，以便任何监听的组件都可以执行某些操作(通常读取新数据)(参见 4.)

8. 来自服务器的 WebAPI 结果是“操作”。他们通过调度程序通知相关商店进行更新。 (见5)

单向流中断如果:

• 组件主动从更高的组件获取/拉取数据 - 此类数据应由更高的组件作为 props 推送(见 1)
• 组件主动从子组件获取数据——作为父组件，组件应该已经拥有这些数据。如果处于子状态，则状态设计水平太低。
• 组件直接更新存储 - 应该通过调度程序执行操作

如果(尽管有些人不同意)也会中断:

• Store 直接更新另一个 store - 应该是 pull 而不是 push(见 6)
• Store 通过 action 推送更新——只允许 webAPI(参见 8)和组件(参见 3)发布 action
• 组件直接执行 webAPI 请求并处理状态中的结果 - 应通过调度程序