FluxJS中常见组件的不同操作

时间:2015-03-26 18:52:16

标签: javascript reactjs reactjs-flux refluxjs

在我的flux应用程序中,我有一个DropDown React组件,它使用一组Key Value Pairs呈现自己。

我想有两个不同的下拉菜单,一个是国家数据,另一个是城市数据。

在Flux模式中,每个下拉列表都会有一个Selection Action,其中包含所选值的有效负载,相应的商店将用它来更新其状态。

如何指定哪个下拉列表Selection属于哪个商店?

我可以创建一个特定于每个需求的包装器组件,即CountryDropDownCityDropDown,并且每个组件都创建自己的特定操作CountrySelectedCitySelected但是习惯的方法?如果是,我如何连接底层的DropDown组件,以便它的onChange处理程序触发父项的操作?

1 个答案:

答案 0 :(得分:1)

行动不应仅属于一个商店或另一个商店。这非常类似于在商店中创建一个setter方法,这与Flux是对立的。

Flux背后的核心理念之一是所有商店都会通知所有商店。调度程序是将操作分发到所有商店的机制。这可以使数据流向不断变化的需求开放。

您的问题可能有一些不同的解决方案。

我会考虑将一个selectedType字段添加到“城市”或“国家/地区”的操作中(或者您可以使用常量而不是字符串)。如果您试图将其抽象化,则可以将此值作为prop传递给React组件。

同样,如果您希望完全灵活地控制子项的行为,并且您希望在父项中定义它(上面的最后一个问题),则可以将回调作为prop传递给子组件。 / p>

如您所述,您可以对每种类型执行单独的操作,但这似乎是向我复制代码。