13

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

  • 我喜欢有一个不可变的状态，它只根据调度的动作而改变，这样应用程序的状态就非常清晰和可调试。
  • 我喜欢从“智能”容器向下流的单向数据，因为这允许我们使用异步管道来减少对状态的检查。

但是我不明白为什么我们要在将动作发送到商店之前将事件从哑组件一直“冒泡”到智能组件。是拥有可重用组件的唯一理由吗？在我看来，大多数组件无论如何都不会被重用，因为在很多情况下我希望所有东西都相同，包括 CSS。我还缺少其他好处吗？从可维护性/可读性的角度来看，能够看到在发生交互的组件上调度的操作不是更好吗？

4

5 回答 5

10

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

  • 我觉得智能组件控制哑组件其实就是所谓的中介者模式。使用这种模式可以确保更少的组件必须处理store，从而增强了虱子耦合。
  • 易于维护：如果您必须重构和批量重命名动作，那么当动作出现在较少的地方时会更容易。
  • 拥有一个处理的中心位置actions可以快速概览架构。访问逻辑的热交换store也可以更容易地完成。
  • 正如已经提到的：重用。您可以在具有或不具有 ngrx 架构的项目之间共享和重用哑组件。
  • 也可以在同一个项目中重用，只需连接不同的inputs和outputs. 例如：AdropdownComponent可能有很多需要不同输入和输出的用例。
于 2016-10-22T21:55:14.770 回答
6

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

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

想象一个为您的一个实体（模型）呈现编辑表单的哑组件。哑组件处理显示表单和验证消息，但是您可以在添加实体屏幕、编辑实体屏幕以及可能在应用程序其他位置的弹出对话框上重新使用该组件。这些用例中的每一个都需要具有相同验证的相同表单，但您可能在“提交”时执行非常不同的操作。在每种情况下，调用哑组件的智能组件可能是不同的智能组件。通过引发事件并将值传递给智能组件，您可以执行截然不同的操作，而只需编写一次“视图”。

于 2016-07-02T00:59:58.153 回答
3

I totally agree with you and I have the same doubt.

I expect the component to emit an action using the dispatcher (which for ngrx/store is the store itself) instead of moving this logic to the container (the actual application).

This way the component is decoupled from the container and the container doesn't need to know about actions: it will just listen to the state change and pass down the eventual data, if necessary.

On the other hand, the Introduction to ngrx/store is promoting the design with a smarter container, which knows a lot about the underlying components.

Frankly, I can't yet see a clear winner: I just think that dispatching actions from the component is simpler, cleaner, and closer to the Elm Architecture which was one of the Redux's inspirations.

于 2016-06-30T07:57:30.703 回答
1

我想扩展给定的答案。

当有人说不从哑组件调度动作有助于重用性时，除了允许您一次又一次地使用您刚刚创建的相同组件之外，它还可以帮助您与 3rd 方组件集成。这些可能是开源组件，甚至可能是您的同事开发的组件，他们不知道您使用 NgRx 处理数据的方式。这样，您就可以尽可能地保持代码通用、模块化和独立于实现。

澄清一下，这都是关于建议的，在某些情况下，采取不同的行动可能更聪明，但通常最好遵守约定。

于 2018-03-15T19:33:44.457 回答
0

我没有在ngrx/example-app中找到关于顶级组件的“冒泡”事件的任何参考。同样在 Rob 的谈话中，我没有得到那个（我可能错过了一些东西）。

我只是在示例中使用所有 ngrx，现在看起来还不错。ngrx/store 用于存储数据，ngrx/effects 用于链接操作（我可以简化），以及“操作”图像中的“中间件”，描述您可以使用存储部分之一进行的所有操作。

然后当它看起来最方便的时候我正在使用动作（我只是确保文件中使用的所有动作都与当前类相关）。

于 2016-06-16T18:51:50.733 回答