Redux / ngrx/store 架构:为什么不从哑组件派发操作?

Redux / ngrx/store architecture: why not dispatch actions from dumb components?

我正在构建一个 Angular 2 ngrx/store 应用程序并尝试了解最佳实践。

但我不明白为什么我们要 "bubble up" 在将操作分派到商店之前从哑组件一直到智能组件的事件。是拥有可重用组件的唯一原因吗?在我看来,无论如何大多数组件都不会被重复使用,因为在很多情况下我都希望所有内容都相同,包括 CSS。我还缺少其他好处吗?从可维护性/可读性的角度来看,能够直接在发生交互的组件上看到调度的动作不是更好吗?

我没有在 ngrx/example-app 中找到任何关于 "bubble up" 顶级组件事件的引用。在 Rob 的演讲中,我也没有听懂(我可能漏掉了什么)。

我只是在示例中使用了所有 ngrx,现在看起来还不错。 ngrx/store 用于存储数据,ngrx/effects 用于链接操作(我可以简化),"middleware" 在 'actions' 的图像中描述了您可以使用其中之一执行的所有操作商店部分。

然后在看起来最方便的时候使用操作(我只是确保文件中使用的所有操作都与当前 class 相关)。

我完全同意你的看法,我也有同样的疑问。

我希望组件使用调度程序(ngrx/store 是商店本身)发出操作,而不是将此逻辑移动到容器(实际应用程序)。

这样组件就与容器解耦了,容器不需要知道动作:它只会监听状态变化并在必要时传递最终数据。

另一方面,Introduction to ngrx/store正在推动设计更智能的容器,它对底层组件了解很多。

坦率地说,我还看不出一个明显的赢家:我只是认为从组件中调度操作更简单、更清晰,并且更接近 Elm Architecture这是 Redux 的灵感之一。

主要原因之一是重复使用。

就 MVC 而言,将智能组件视为控制器,将哑组件视为视图。

想象一个为您的实体(模型)之一呈现编辑表单的哑组件。 dumb 组件处理显示表单和验证消息,但是您可以在添加实体屏幕、编辑实体屏幕以及应用程序中其他地方的弹出对话框中重复使用该组件。这些用例中的每一个都需要具有相同验证的相同表单,但您可能对 "submit" 执行非常不同的操作。在每种情况下,调用哑组件的智能组件很可能是不同的智能组件。通过引发事件并将值传递给智能组件,您可以执行截然不同的操作,而只需编写 "view" 一次。

首先,我不是该主题免责声明的专家。

  • 感觉智能组件控制哑组件其实就是所谓的中介模式。使用此模式可确保更少的组件必须处理 store,从而增强了虱子耦合。
  • 易于维护:如果您必须重构和批量重命名操作,当操作出现在较少的地方时,这样做会更容易。
  • 有一个处理 actions 的中心位置允许快速概览 体系结构。 store 访问逻辑的热交换也可以更容易地完成。
  • 正如已经提到的:重用。您可以在具有或不具有 ngrx 架构的项目之间共享和重用哑组件。
  • 也可以在同一项目中重复使用,只需连接不同的 inputsoutputs。例如:dropdownComponent 可能有很多需要不同输入和输出的用例。

我想扩展给出的答案。

据说不从哑组件调度操作有帮助 re-usability,除了允许您一次又一次地使用刚刚创建的同一组件外,它还可以帮助您与第 3 方组件集成。这些可能是 open-source 组件,甚至是您的 co-worker 可能开发的组件,它不知道您使用 NgRx 操作数据的方式。 通过这种方式,您可以尽可能保持代码的通用性、模块化和 implementation-independent。

澄清一下,这全都是建议,在某些情况下,采取不同的行动可能更明智,但通常最好坚持惯例。