flux - 通量存储中的异步数据加载

Question

假设我有一个 TodoStore。 TodoStore 负责保存我的 TODO 项目。待办事项存储在数据库中。

我想知道将所有待办事项加载到商店的推荐方法是什么，以及 View 应该如何与商店交互以在启动时加载 TODO 项目。

第一个选择是创建一个 loadTodos将从数据库中检索 Todos 并发出 TODOS_LOADED 的操作事件。 View 随后将调用 loadTodos行动再听TODOS_LOADED事件，然后通过调用 TodoStore.getTodos() 更新自己.

另一种选择是没有 loadTodos行动，并有一个 TodoStore.getTodos()这将返回一个包含现有 TODO 项目的 promise 。如果 TodoStore 已经加载了 TODO 项，它只会返回它们；如果没有，那么它将从数据库中查询并返回检索到的项目。在这种情况下，即使商店现在已经加载了 TODO 项目，它也不会发出 TODOS_LOADED 事件，因为 getTodos不是行动。

function getTodos() {
   if (loaded)
      return Promise.resolve($todoItems);
   else
      return fetchTodoItemsFromDatabase().then(todoItems) {
         loaded = true;
         $todoItems = todoItems;
         return $todoItems;
      });
}

我相信很多人会说这破坏了 Flux 架构，因为 getTodos函数正在改变存储状态，并且存储状态只能通过从调度程序发送的 Action 来改变。

但是，如果您认为 TodoStore 的状态是数据库中现有的 TODO 项，则 getTodos并没有真正改变任何状态。 TODO 项完全相同，因此不需要更新或通知 View 。唯一的问题是现在商店已经检索到数据，因此现在将其缓存在商店中。从 View 的角度来看，它不应该真正关心 Store 是如何实现的。它不应该真正关心商店是否仍然需要从数据库中检索数据。所有 View 关心的是它们可以使用 Store 获取 TODO 项，并且当新的 TODO 项被创建、删除或更改时，Store 会通知它们。

因此，在这种情况下， View 应该只调用 TodoStore.getTodos() 在加载时呈现自己，并在 TODO_CHANGE 上注册一个事件处理程序，以便在由于添加、删除或更改而需要更新自己时收到通知。

您如何看待这两种解决方案。他们还有其他解决方案吗？

Answer 1

View 不必是调用 loadTodos() 的实体。这可能发生在引导文件中。

您应该尽力将数据流限制为调度有效负载内的操作，这是正确的。有时您需要根据其他商店的状态导出数据，这就是 Dispatcher.waitFor() 的用途。

您的 fetchTodoItemsFromDatabase() 解决方案与 Flux 的相似之处在于没有其他实体在商店中设置数据。商店正在自我更新。这很好。

我对该解决方案的唯一严重批评是，如果您实际上是从服务器获取初始数据，它可能会导致渲染延迟。理想情况下，您将使用 HTML 发送一些数据。您还需要确保在 Controller View 的 getInitialState() 方法中调用商店的数据。