NgRx(含NgRx数据) – 完整指南(Angular 15) | NgRx (with NgRx Data) – The Complete Guide (Angular 15)
了解现代 NgRx 生态系统,包括 NgRx Data、Store、Effects、Router Store、NgRx Entity 和 DevTools
你将会学到的
- Github 存储库中的代码,每个部分都有可下载的 ZIP 文件
- 熟悉集中存储模式,以及如何在 Angular 中使用它
- 了解何时使用集中式商店解决方案以及原因
- 了解如何使用 NgRx Data 以最少的代码处理实体数据
- Learn In-depth NgRx Store,详细了解所有核心存储模式,包括 Reducers 和 Actions
- 详细了解 NgRx Effects,了解何时使用副作用
- 详细了解 NgRx Entity,何时使用以及为什么使用,了解有哪些好处
- 逐步转换现有的 Angular 普通应用程序,并将其转变为基于商店的应用程序
- 学习在 NgRx 中实现常见功能,例如身份验证或实体分页
- 通过实施真实用例,以有趣且实用的方式深入学习 NgRx
要求
- 一点点 Angular 和 Typescript
说明
本课程是新的 NgRx 生态系统的完整指南,包括 NgRx Data、Store、Effects、Router Store、NgRx Entity 和 DevTools,并附带一个正在运行的 Github repo
本课程简而言之
当涉及到前端架构设计选择时,状态管理是第一个要了解的主题。为什么选择在单页应用程序中进行状态管理,什么时候做,为什么,有什么好处,有什么权衡?
这些都是我们将在本课程中解决的关键问题,因为我们会为您提供 NgRx 生态系统的扩展导览。
Angular 领域最流行的状态管理库是 NgRx,这是有充分理由的。NgRx 的最新版本可能是最近整个 Angular 生态系统中最重要的版本之一。尽管向后兼容,但它包含如此多的新功能,几乎可以说是一个全新的状态管理库。
在幕后, Actions、Reducers、Effects、Entities 和 Selectors 的核心概念保持不变,但我们现在拥有一个全新的 API,用于以更简洁的方式管理这些概念。此外,我们还包含了NgRx Data,这是一种管理实体数据的全新且非常强大的方法。
实际上,NgRx Data 是NgRx 之上的一个强大的抽象层,它允许我们为应用程序的大部分添加状态管理,而无需编写太多代码!
课程大纲
在本课程中,我们将采用一个在没有任何状态管理的情况下构建的小型现有应用程序。我们将通过识别应用程序在其初始形式中存在的一些问题来了解不进行状态管理的后果。
然后我们就要开始重构应用了,我们要一步步给应用多屏添加状态管理。我们将从应用程序的身份验证功能开始,然后我们将继续进行实体数据管理部分。
我们将详细解释NgRx 的所有关键概念:Actions、Reducers、Effects 和 Selectors,我们将详细解释 Store 架构本身并了解它的好处。
在整个课程中,我们将逐步介绍并详细解释NgRx Store 模块、NgRx Effects,我们将详细介绍NgRx 实体和实体格式,我们将安装并进行导览NgRx Dev Tools、NgRx Router Store和时间旅行调试器。
我们还将学习如何充分利用NgRx 数据,并学习如何对其进行自定义,以便使用最少的应用程序代码来管理实体数据。我们将涵盖 NgRx,同时牢记良好的 Action 卫生等最佳实践。
目录
本课程涵盖以下主题:
- 状态管理简介
- 商店架构详解
- NgRx 关键概念
- 行动和行动创造者
- 减速机
- NgRx 效果
- 选择器
- 向 NgRx 应用程序添加身份验证
- NgRx 实体和实体格式
- NgRx 开发者工具
- NgRx 时间旅行调试器
- NgRx 运行时检查和存储不变性
- NgRx 路由器商店
- NgRx 数据和实体状态管理
- NgRx 最佳实践
您将在本课程中学到什么?
在本课程结束时,您将对状态管理的概念和一般的集中式存储解决方案感到满意。
您将使用 NgRx 使用简单的方法轻松设计新的应用程序,并且您将深入了解完整的 Ngrx 库生态系统:包括 Ngrx Store、Effects、Entity 和 NgRx Data 库。
您将了解如何使用 Ngrx Schematics 快速构建部分解决方案,以及如何从头开始设置 Ngrx DevTools,包括路由器集成。
此课程面向哪些人:
- 希望深入了解现代 NgRx 生态系统的 Angular 开发人员,包括 Ngrx Store、Effects、Router Store、Ngrx Entity、DevTools 和 Schematics!
TheItzy » NgRx(含NgRx数据) – 完整指南(Angular 15) | NgRx (with NgRx Data) – The Complete Guide (Angular 15)