javascript - FluxJS 中常见组件的不同操作

标签 javascript reactjs reactjs-flux refluxjs

在我的 Flux 应用程序中,我有一个 DropDown React 组件,它使用键值对数组来呈现自身。

我想要两个不同的下拉菜单,一个包含国家/地区数据,另一个包含城市数据。

在 Flux 模式中,每个下拉列表都会有一个 Selection 操作,其中包含所选值的有效负载,相应的存储将使用该操作来更新其状态。

如何指定哪个下拉Selection操作属于哪个商店?

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

最佳答案

操作不应专属于一家商店或另一家商店。这非常像在 store 中创建一个 setter 方法,这与 Flux 是对立的。

Flux 背后的中心思想之一是所有存储都由所有操作通知。调度程序是将操作分发到所有存储的机制。这使数据流能够满足不断变化的需求。

您的问题可能有几种不同的解决方案。

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

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

正如您所描述的,您可以针对每种类型分别执行单独的操作,但这对我来说似乎是重复的代码。

关于javascript - FluxJS 中常见组件的不同操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29286611/

相关文章:

javascript - document.write 完成后重定向

javascript - 无法从 Material UI 对话框中删除滚动条

javascript - 无法去除 webpack bundle js 文件中的注释

javascript - react 条件 onClick 与符号

javascript - React Flux 存储发出事件不起作用

javascript - Typescript 类型定义版本

javascript - 我在使用 jquery ajax 加载文本文件内容时遇到一些问题

javascript - Material ui onClose 作为 disableBackdropClick 的替代品

javascript - 如何在不进行轮询的情况下从我的 Ruby REST/CRUD API 持续更新我的 ReactJS 客户端?

reactjs - 何时将 Flux(等)与 React 一起使用?