NgRx 核心概念

NgRx 简介

NgRx 是一个基于 Redux 模式构建响应式 Angular 应用的框架。

NgRx 包

NgRx 提供了多个包，用于在 Angular 应用中实现不同的功能。本课程将介绍以下库：

状态管理

• @ngrx/store：基于 Redux 的 Angular 状态管理库，是使用 NgRx 所必需的唯一库。

• @ngrx/effects：帮助我们在 @ngrx/store 中处理副作用。

• @ngrx/router-store：将 Angular 路由与 @ngrx/store 进行连接。

• @ngrx/entity：帮助我们管理实体集合。

• @ngrx/component-store：帮助我们在 Angular 组件中管理局部状态。

数据管理

• @ngrx/data：帮助我们管理实体数据。

视图层

• @ngrx/component：帮助我们生成响应式的 Angular 模板。

开发者工具

• @ngrx/store-devtools：帮助我们高效地调试 @ngrx/store。

• @ngrx/schematics：帮助我们使用 NgRx 库快速搭建 Angular 项目。

• ESLint 插件：帮助我们保持 NgRx 代码库的最佳实践。

NgRx 状态管理生命周期

NgRx 通过遵循 Redux 原则来管理应用状态。虽然其核心原则与 Redux 相同，但 NgRx 提供了一些额外功能以更好地管理状态。

• Store：理解 NgRx Store 的第一点是，它是一个单例。这意味着在一个 Angular 应用中只能存在一个 Store。Store 在应用启动时创建。启动（Bootstrapping）是指初始化 Angular 应用的过程。启动过程中会设置 NgRx Store，并将其注入到根组件 AppComponent 中。之后，任何子组件只要注入该 Store，即可访问它。

• Actions：当 Store 被注入到组件后，该组件就可以向 Store 发送动作（action）。发送动作通过调用 Store 的 dispatch() 方法完成。dispatch() 方法接收一个动作对象作为参数。该动作对象必须包含一个 type 属性，Store 会根据这个 type 来决定如何更新状态中的数据。

• Reducers：Store 通过调用 reducer 函数来更新状态中的数据。reducer 是一个纯函数，接收当前状态和一个动作作为参数，并返回一个新的状态。Store 使用 reducer 来更新状态，新状态会被发布给所有订阅者。

• Selectors：订阅者是指通过 Store 的 subscribe() 方法订阅了 Store 的组件。subscribe() 方法接收一个回调函数作为参数。订阅的组件会在回调函数中接收到新的状态。使用 NgRx Selectors 可以帮助我们避免重复代码（DRY），使我们能够从 Store 中提取特定的状态片段。

• Effects：NgRx Effects 是一个库，允许我们根据 NgRx 动作创建副作用。例如，假设某个组件在某个特定动作被分发时需要发起 HTTP 请求。借助 NgRx Effects，我们可以创建一个效果（effect），监听该动作并执行 HTTP 请求。NgRx Effects 可以结合 Angular 服务从数据库获取数据。

下图总结了 NgRx 状态管理的生命周期：