Angular,Central(Redux)'Store'与Singleton Service,又名"分离关注事件"？

Question

在我们为新的Angular项目做准备时,我们正在评估在我们的系统中采用的各种架构概念 - 尤其是状态管理.在过去,主动通知客户端组件存在自然的复杂性.今天,进入反应式编程和中央商店.

我理解维护"大型"中央存储的本质,其中包含相应的操作(在各种服务中),reducer和包含整个应用程序状态的订阅者.我也看到了使用这些纯函数减速器进行分层单元测试的好处.我的问题是,这是如何与"关注点分离"和"单一责任"的经典概念相结合,其中通过其专用服务(依赖注入)为这些组件维护状态,同时提供了相似的解耦？

为什么使用大型中央存储而不是单一服务来维持"包含"状态,这些服务会对订户进行更改并保持关注点分离(例如:客户数据与库存数据分开).虽然在SO和网络的其他部分都有这样的暗示,但我没有看到直接解决这个问题的参考文献.比较这两个概念(中央商店状态与依赖注入服务/单身状态)和/或做出的参考的想法非常受欢迎.

Answer 1

问自己此类有关项目架构的问题绝对是 Angular 之旅的良好开端。

使用 AngularJs (v1.x)，我真的不知道以响应方式工作的最佳模式是什么，并确保每个组件都可以订阅服务中某处的数据，并且如果另一个组件调用该服务来更新某些数据，其他组件将会更新。当时，我尝试了多种解决方案，最终添加RxJs到我的项目中。这可能有点矫枉过正，因为我不知道RxJs超能力，而且我基本上没有使用任何运营商，我只是订阅。

6~8个月前，我发现Redux并发现这个方法很有趣。我决定进一步深入研究具有纯函数和不可变数据的集中式存储的想法。这是我作为网络开发人员所做过的最佳选择之一。您可以Redux在任何框架之外使用。因此，即使我确实必须制作一个示例并JQuery维护大量数据，我也会使用Redux.

我真正喜欢的一件事Redux是标准化我的数据并像数据库一样操作它们，例如，reducer 操作表。“计算视图”selectors也是一种根据原始“表格”组合数据的强大方法。

我的问题是，这如何与“关注点分离”和“单一责任”的经典概念相结合，其中通过其专用服务（注入依赖项）维护这些组件的状态，同时还提供了某种程度的解耦？

好吧，正如您标记的那样ngrx，我可以想象您计划将其与 Angular（v2 或 +）一起使用，并且关注点分离非常好。您通过Reducer 拆分逻辑来操作表，但是例如进行ajax 调用怎么样？对于这种副作用，您应该使用ngrx/effects。所以你仍然拥有你的服务+减速器。Effects将允许您对给定操作的调度做出反应。

例如，如果您使用actiontype分派 an FETCH_USER，则在您的化简器中，您只需将布尔值切换isFetchingUser为 true （这样您就可以在视图中显示旋转器）。然后从 a user.effect.ts（这是一项服务），您可以捕获该FETCH_USER操作并调用您的后端。一旦响应到达，从effect中分派一个actionFETCH_USER_SUCCESS并将来自ajax调用的数据传递到action中payload。

如果您想查看一些代码，我在 Github 上创建了一个名为Pizza-Sync的演示。它使用@ngrx/store和@ngrx/effects标准化数据。

如果您有Chrome或 Firefox Redux 开发工具扩展，则可以查看商店和操作。

希望它有帮助，如果您还有其他问题，请告诉我。