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

时间:2015-05-20 22:16:06

标签: reactjs reactjs-flux flummox

当我使用flummox,一个磁通库时,我正在试图找出加载初始状态的位置。我已经看到它做了几个方面,但我很好奇是否有推荐的方法来做到这一点。让我们说你有一些你已经保存在本地存储或数据库或其他东西的待办事项。你会把它们拿到哪里并让它们进入你商店的状态?

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

我也看到它建议在动作本身内部执行ajax,flummox似乎很好地支持他们的异步等待支持。我想在这种情况下你只是触发一些初始状态动作?

1 个答案:

答案 0 :(得分:5)

您不应该直接在组件componentDidMount中使用Ajax请求从服务器加载状态。这样做的原因是Flux的目的是隐藏组件中状态提取/管理的细节。 Flux实现应该为您做到这一点。

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

操作

当涉及到动作以及你使用它们时,要考虑一件事。一个动作应该是改变你的应用程序状态的东西。您可以将所有操作组合为一组应用于您的州的事务。操作会将您的应用程序数据从一个状态转换为下一个状态。

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

一些Flux实施倾向于混合动作(例如"更新此待办事项")和问题(例如"给我带有id 2和#34的待办事项;)。这可能很方便,但它有点模糊了一个动作的定义。一个问题并没有改变状态,它只是从中读取。

问题应该作为商店的方法实施,例如TodoStore.getItem(id)(Flummox似乎更喜欢)。

<强>答案

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

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

事实证明这是一面文字,但我想再说一点。大多数Flux实现(包括Flummox)都主张将整个应用程序状态保存在商店的内存中。这适用于很多情况,但如果您的应用程序有大量数据,则会开始崩溃。不仅因为使用内存,而且还因为搜索您想要迭代数千个对象以找到匹配项的内容,您需要一个能够为您处理这些内容的数据库。

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

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