使用纯 RxJs 以反应式风格构建 Angular 16 应用程序 – 模式、反模式、轻量级状态管理
你将会学到的
-
Github 存储库中的代码,每个部分都有可下载的 ZIP 文件
-
学习轻量级状态管理技术(仅限 RxJs)
-
总体理解响应式编程的核心原则
-
了解如何使用 RxJs 以反应式风格在 Angular 中构建应用程序
-
学习 RxJs 应用程序设计模式和反模式目录
要求
-
Angular(初级)
-
Typescript
-
RxJs 的一些基础知识
说明
本课程简而言之
本课程是每个 Angular 开发人员都应该知道的常用设计模式(和一些反模式)的目录。本课程的目标是教您如何仅使用普通的 RxJs以 Reactive 风格舒适地设计和开发 Angular 应用程序,仅此而已。
本课程随附一个运行中的 Github 存储库,其中包含已完成的代码,以及课程不同部分的起点,以备您想一起编写代码时使用,我们建议这是最好的学习方式。
本课程回答了一个常见问题:在不引入任何状态管理库的情况下,我们可以在仅使用普通 RxJ 的情况下在 Angular 中走多远?
事实证明,本课程中教授的一组简单技术非常适合广泛的应用程序,尤其是内部构建的企业应用程序。
在本课程中,您将确切地学习如何使用 RxJs 来设计和开发应用程序的服务层和视图层,并且您将了解反应式方法的优点和缺陷。
特别是在状态管理方面,事实证明我们已经可以通过仅利用普通的 Angular 和 RxJs 技术走得很远,而无需使用额外的状态管理库,例如 NgRx。
这些简化的状态管理技术足以满足大范围的应用程序,我们认为您在考虑采用成熟的状态管理解决方案之前应该首先考虑它们。
您可以使用这些技术走多远?这就是您将在本课程中了解到的内容。
课程大纲
我们将从一个以命令式风格编写的小型 Angular 应用程序开始我们的课程,我们将讨论这种方法的一些问题。然后,我们将重构应用程序并逐步解释如何以反应式方式实现它。
我们将详细解释我们在本课程中遇到的每个 RxJs 运算符,这是我们第一次需要每个运算符。
我们将首先从一个完全无状态的解决方案开始,但稍后我们将通过应用一些简单的 RxJs-only 状态管理技术来改善用户体验。我们将使用这些模式来处理应用程序的一些数据,以及用户身份验证配置文件。
实现轻量级状态管理所需的关键元素是 RxJs 行为主题,因此我们将在课程中详细介绍这些内容。我们还将为常见的 UI 功能(如加载指示器或错误消息)提供分步响应式解决方案。
目录
本课程涵盖以下主题:
- 审查以命令式风格编写的应用程序
- 重构为无状态反应式,了解好处
- 智能与展示组件
- 无状态可观察服务
- shareReplay 操作符
- 无状态 UI 更新(无状态管理)
- RxJs Subject 和 BehaviorSubject 简介
- 使用共享可观察服务的解耦组件通信
- 使用 Observables 让组件在组件树的不同级别进行交互
- 反应式的错误处理和错误消息
- 以反应式加载指标
- 使用轻量级 RxJs 存储改善用户体验
- 乐观的 UI 更新
- 使用纯 RxJs 管理用户身份验证状态
- 本地与全球服务
- 具有反应式缓存主表的主细节
- 单一数据可观察模式:避免嵌套的 ng-component 标签
- 将响应式应用程序重构为 OnPush 变化检测
- 结论和要点
您将在本课程中学到什么?
在课程结束时,您将通过利用纯 RxJs-only 技术轻松地以反应式风格设计和开发 Angular 应用程序。您将知道如何将简化的反应式状态管理技术应用于不同的常见用例,并且您将了解这种方法的优点和局限性。
您将熟悉一系列常用的响应式设计模式,还将熟悉一系列需要避免的常见陷阱。
此课程面向哪些人:
- 希望学习如何构建反应式风格的 Angular 应用程序的 Web 开发人员
- 希望学习轻量级状态管理技术的 Angular 开发人员(仅使用 RxJs)