使用flummox(通量)时在哪里获取初始状态?

Where to fetch initial state when using flummox (flux)?

我正在尝试找出在使用 flummox(一种通量库)时加载初始状态的位置。我已经看到它以几种方式完成,但我很好奇是否有推荐的方法来做到这一点。假设您有一些已保存在本地存储或数据库中的待办事项。你会在哪里获取这些并将它们放入你的商店状态?

我看到它建议在 React 的 componentDidMount 中执行实际的 ajax 查询,并触发一个操作,将 ajax 的结果传递给该操作。该数据将流入商店的状态并作为您的初始状态返回到视图。

我还看到它建议在操作本身内部执行 ajax,flummox 似乎很好地支持异步等待支持。我想在这种情况下你会触发一些获取初始状态的操作吗?

您不应直接在组件 componentDidMount 中使用 Ajax 请求从服务器加载状态。这样做的原因是 Flux 的目的是向组件隐藏状态 fetching/management 的细节。 Flux 实现应该为你做那件事。

不同的 Flux 实现有很多变化,确实没有正确或错误的方法。

操作数

当涉及到操作及其用途时,需要考虑一件事。一个动作应该是改变你的应用程序状态的东西。您可以将所有操作组合为应用于您的状态的一堆事务。一个操作将您的应用程序数据从一种状态转换为另一种状态。

因此,如果您要放弃所有应用程序状态,您只需按正确的顺序再次应用所有操作,最终会得到相同的状态。那么为什么这很重要呢?因为它告诉你什么不能使用动作。

一些 Flux 实现倾向于混合操作(如 "Update this todo item")和问题(如 "Give me the todo item with id 2")。这可能很方便,但有点模糊了动作的定义。一个问题不会改变状态,它只是从中读取。

问题应该作为 Stores 上的方法来实现,例如 TodoStore.getItem(id)(Flummox 似乎更喜欢)。

回答

所以回答你的问题:即使获取初始状态是异步的并且看起来很适合一个动作,因为 Flummox 对它们有很好的异步支持,我会在商店中加载初始状态(可能使用简单 Ajax 请求,然后在商店中调用 setState)。这是因为 Store 拥有状态并且应该知道如何处理它。然后组件会向 Store 请求所有项目(使用 Flummox 的 FluxComponentfluxMixin)。它会为第一次渲染提供一个空列表,但是一旦 Ajax 请求完成,对 Store.setState() 的调用将触发重新渲染完整列表。

将所有应用程序状态保存在内存中

原来是一堵文字墙,但我想再指出一件事。大多数 Flux 实现(包括 Flummox)都提倡将整个应用程序状态保存在存储的内存中。这在很多情况下都很好,但如果您的应用程序有大量数据,那就开始崩溃了。不仅因为内存使用,而且对于诸如搜索之类的事情,您不想迭代数千个对象来找到匹配项,您需要一个数据库来为您处理。

因此对于这些情况,您可能希望将状态存储在 IndexedDBWebSQL 中,并且很难将其与期望它是同步输入的 Flux 实现集成-内存对象。

如果您不希望在客户端上需要那么多应用程序状态,则可以使用 Flummox 或任何其他 Flux 实现,但它需要保留在内存中(没有双关语意)。