11

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

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

第一个替代方法是创建一个loadTodos操作，该操作将从数据库中检索 Todos 并发出一个TODOS_LOADED事件。然后视图将调用该loadTodos操作，然后侦听该TODOS_LOADED事件，然后通过调用来更新自己TodoStore.getTodos()。

另一种选择是没有一个loadTodos动作，并且有一个TodoStore.getTodos()将返回一个带有现有 TODO 项目的承诺。如果 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函数正在更改存储状态，而存储状态只能通过调度程序发送的操作来更改。

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

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

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

4

3 回答 3

3

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

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

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

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

于 2014-08-13T17:27:58.987 回答
0

这是我对此的看法，非常接近你的看法。

  • Store我通过Immutable.jsImmutable.Record和Immutable.OrderedMap从Immutable.js维护我的应用程序的状态
  • 我有一个从 Store 获取状态的顶级控制器视图组件。

如下所示：

function getInitialState() {
    return {
        todos: TodoStore.getAll()
    }
}
  • TodoStore.getAllAPIUtils.getTodos()如果内部_todos映射为空，方法将通过请求从服务器检索数据 。我提倡读取触发的数据Store和写入触发的数据ActionCreators。
  • 在处理请求时，我的组件将呈现一个简单的加载微调器或类似的东西
  • 当请求解决时，APIUtils触发一个动作，例如TODO_LIST_RECEIVE_SUCCESS或TODO_LIVE_RECEIVE_FAIL取决于响应的状态
  • 我的TodoStore遗嘱通过更新其内部状态来响应这些操作（使用从操作有效负载创建的内部状态填充它的Immutable.OrderedMap内部Immutable.Record。

如果您想通过基本实现查看示例，请查看有关 React/Flux 和 xhr/routing/caching 的答案。

于 2015-08-26T15:50:50.090 回答
0

我知道这已经是几年前的事了，但它完美地总结了我这周遇到的问题。因此，为了帮助可能遇到这个问题的任何其他人，我发现 Nick Klepinger 的这篇博客文章确实帮助了我：“ngrx 和英雄之旅”。

它专门使用 Angular 2 和 @ngrx/store，但很好地回答了您的问题。

于 2017-04-05T15:28:56.403 回答