react/flux- 子组件用户事件 - 一切都应该通过调度程序路由吗

Posted 2023-02-22

【中文标题】react/flux- 子组件用户事件 - 一切都应该通过调度程序路由吗

【英文标题】：react/flux- child component user events - should everything be routed via the dispatcher

【发布时间】：2015-05-17 14:01:25

【问题描述】：

我只是在使用通量和反应制作一个简单的原型。以前当我使用 React 时，我已经将事件从子组件发送到它们的父组件（他们在子组件上注册了 prop 回调），然后在父组件中更改了状态。

遵循 Flux 架构是否应该通过 Dispatcher 引发所有事件？例如，即使是一个简单的用户事件，例如复选框的选择，也应该通过这个链引发：

在组件事件处理程序中创建一个动作 发送给调度员 调度员发送到商店 store 向控制器视图发出更改事件 控制器视图回调到商店以提取零钱

谢谢

【问题讨论】：

由于您使用了“所有事件”之类的绝对值，因此很容易回答“否”。 keydown 之类的事件可能对 Store 没有直接影响。例如，可能某个键已被过滤，或者如果它是 enter 键会触发一个事件。也许你的意思是问一些更精确的东西？

谢谢。你如何决定一个事件应该被路由到 store 还是只在子组件和父组件内部处理？

@jonho 一个好的基准是，数据应用程序/域状态还是瞬态组件状态？瞬态状态通常最适合保持组件本地化。同样，可重用组件应使用本地状态，因此它们不依赖于任何特定的通量实现/数据。

这是有道理的。谢谢

@BinaryMuse - 如果您想将其添加为答案，这可以回答我的问题？

【参考方案1】：

一个动作应该在两种情况下分派：

用户输入 当您必须从子组件更改父级数据时。

在您的情况下，为每个用户的交互调度一个操作取决于您的应用程序，您应该问自己三个问题：

您是否需要请求让您的后端知道复选框状态？ 您是否进行任何类型的 API 调用？ 其他非子组件是否需要了解它？

如果上述问题的至少一个答案是“是”，那么您应该发送一个操作。

【参考方案2】：

我认为这完全取决于依赖关系，如果您的事件是或可能会产生依赖关系（即影响您的信息流或确定未来收到的信息），那么您应该使用操作和存储。

一个例子：你有一个带有多个复选框的表单我认为没有必要使用动作和存储，用户可以改变主意，选中/取消选中某些东西，发送表单时很重要，然后你触发一个动作。

相反，如果此复选框类似于“如果有任何新情况通知我”并触发创建侦听器，那么您应该使用操作并存储。