FluxJS 中常见组件的不同操作
Different actions for common components in FluxJS
在我的 flux 应用程序中,我有一个 DropDown React 组件,它使用一组键值对呈现自身。
我想要两个不同的下拉菜单,一个是国家数据,另一个是城市数据。
在 Flux 模式中,每个下拉菜单都会有一个 Selection
动作,其中包含所选值的有效负载,相应的商店将使用它来更新其状态。
如何指定哪个下拉 Selection
操作属于哪个商店?
我可以创建一个特定于每个需求的包装器组件,即 CountryDropDown
和 CityDropDown
,并让每个组件创建自己的特定操作 CountrySelected
和 CitySelected
但是这是惯用的方法吗?如果是,我如何连接底层 DropDown
组件,以便它的 onChange
处理程序触发父级的操作?
动作不应该只属于一家或另一家商店。这很像在 store 中创建一个 setter 方法,这与 Flux 是对立的。
Flux 背后的核心思想之一是所有商店都通过所有操作获得通知。调度程序是将操作分发到所有商店的机制。这使数据流能够满足不断变化的需求。
您的问题可能有几种不同的解决方案。
我会考虑将 selectedType 字段添加到 'city' 或 'country' 的操作中(或者您可以使用常量而不是字符串)。如果你想保持抽象,你可以将这个值作为 prop 传递给 React 组件。
同样,如果您希望完全灵活地控制子组件的行为,并且希望在父组件中定义它(上面的最后一个问题),您可以将回调作为 prop 传递给子组件.
正如您所描述的,您可以为每种类型设置单独的操作,但这对我来说似乎是重复代码。
在我的 flux 应用程序中,我有一个 DropDown React 组件,它使用一组键值对呈现自身。
我想要两个不同的下拉菜单,一个是国家数据,另一个是城市数据。
在 Flux 模式中,每个下拉菜单都会有一个 Selection
动作,其中包含所选值的有效负载,相应的商店将使用它来更新其状态。
如何指定哪个下拉 Selection
操作属于哪个商店?
我可以创建一个特定于每个需求的包装器组件,即 CountryDropDown
和 CityDropDown
,并让每个组件创建自己的特定操作 CountrySelected
和 CitySelected
但是这是惯用的方法吗?如果是,我如何连接底层 DropDown
组件,以便它的 onChange
处理程序触发父级的操作?
动作不应该只属于一家或另一家商店。这很像在 store 中创建一个 setter 方法,这与 Flux 是对立的。
Flux 背后的核心思想之一是所有商店都通过所有操作获得通知。调度程序是将操作分发到所有商店的机制。这使数据流能够满足不断变化的需求。
您的问题可能有几种不同的解决方案。
我会考虑将 selectedType 字段添加到 'city' 或 'country' 的操作中(或者您可以使用常量而不是字符串)。如果你想保持抽象,你可以将这个值作为 prop 传递给 React 组件。
同样,如果您希望完全灵活地控制子组件的行为,并且希望在父组件中定义它(上面的最后一个问题),您可以将回调作为 prop 传递给子组件.
正如您所描述的,您可以为每种类型设置单独的操作,但这对我来说似乎是重复代码。