随着前端技术的不断发展，越来越多的企业开始将 SPA (Single Page Application) 作为自己网站的主要开发方式，以提供更好的用户体验和更快的页面加载速度。而在 SPA 开发中，Angular 9 和 NgRx 已被广泛采用，用于数据管理和状态管理，提高了应用程序开发的效率和可靠性，让开发人员更加专注于前端业务逻辑的开发。
NgRx 是什么？
NgRx 是一个管理状态 (state) 和数据流 (data flow) 的库，基于 Redux 设计模式而来。通过使用 NgRx，我们可以将整个应用程序作为一个可预测的状态机来管理，使得应用数据的流动更加清晰、可追踪和可维护。
Angular 基础
在开始使用 Angular 9 和 NgRx 之前，您需要掌握以下 Angular 基础知识：
TypeScript: Angular 使用 TypeScript 作为开发语言，TypeScript 是 JavaScript 的超集，它添加了一些静态类型特性，提高了代码的可读性和可维护性。
RxJS: RxJS 是一种强大的事件响应库，它提供了一种响应式 (reactive) 编程模型，可以让您轻松地处理异步操作和事件流。在 Angular 中，RxJS 被广泛应用于处理表单输入、路由、HTTP 请求等事件流。
Angular CLI: Angular CLI 是一个基于命令行的工具，可以帮助您快速创建 Angular 项目、生成组件和服务、打包和部署应用程序，并提供了丰富的开发环境和构建工具。
NgRx 核心概念
在使用 NgRx 构建应用程序时，我们需要理解以下核心概念：
Store: Store 是 NgRx 最重要的核心概念之一，它类似于 Redux 的 store，用于存储应用程序的状态。Store 包含了应用程序的所有状态，每个状态都可以被视为一个 JavaScript 对象。
Action: Action 实际上是一个纯对象，它用于描述应用程序的状态变化。每个 Action 都包含一个 type 属性，用于指定状态变化的类型，以及一个可选的 payload 属性，用于传递状态变化的数据。
Reducer: Reducer 是用于处理状态变化的纯函数，它接收一个旧状态和一个 Action，返回一个新状态。Reducer 必须是一个纯函数，不能修改旧状态。
Effect: Effect 是用于处理异步操作和副作用的一种机制，它是基于 RxJS 的 Observable 可观察对象实现的。Effect 将 Action 和 Observable 组合在一起，用于处理异步操作。
NgRx 最佳实践
在使用 NgRx 构建 SPA 应用时，我们需要按照以下最佳实践：
尽量减少状态的数量，让状态集中。在构建应用程序时，我们需要尽量避免在多个组件之间传递状态。如果状态的数量过多，容易造成数据流的混乱，影响应用程序的维护性和可扩展性。
每个状态必须有一个唯一的标识符。在使用 NgRx 时，我们需要为每个状态定义一个唯一的标识符，以便跟踪状态的变化情况。通常情况下，我们可以使用 Action 的类型来定义状态的标识符。
每个组件只能订阅自己关心的事件流。在使用 NgRx 构建 SPA 应用时，我们需要避免让每个组件都订阅整个 AppState，因为它会导致性能问题。因此，我们需要仅仅让每个组件订阅自己关心的事件流，以提高应用程序的性能。
使用 Selector 对状态进行过滤。在使用 NgRx 时，我们可以通过定义 Selector 来对状态进行过滤，以便在组件中仅仅展示或监听自己关心的状态。Selector 是基于 RxJS 的 Observable 实现的，可以实现处理数据流的转换和过滤。
示例代码
以下是使用 Angular 9 和 NgRx 构建 SPA 应用的示例代码，通过该代码可以更好地理解 NgRx 的基本用法和最佳实践：
------ - ------------- -------------- --- -------------- - ---- --------------
------ - ------------- -------- ------ - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- ----------------
------ - ---------- --- - ---- -----------------
-- -- --------
------ --------- -------- -
-------- --------
------ -------
----- ------
-
-- -- ------ --
------ ----- -------- - ------------------ -------
------ ----- --------------- - ------------------ ---- ---------
------ ------ -- -- ---- --
--
------ ----- --------------- - ------------------ ---- ---------
------- ------- -- -- ----- --
--
-- -- -------
------ ----- ------------- -------- - - -------- ------ ------ --- ----- -- --
------ ----- ---------- - --------------
-------------
------------ ----- -- -- --------- -------- ---- ----
------------------- ------- - ---- -- -- -- --------- -------- ------ ----- ---- ----
------------------- ------- - ----- -- -- -- --------- -------- ------ ------ ----- ---
--
-- -- ------
-------------
------ ----- ---------- -
--------- - --------------- --
-------------------
-----------------
------------ --
--------------------------------------------------
-------------- ---- -- ---------------------------
---------------- -- ---------------------------
-
-
-
--
------------------- --------- -------- ------- ----- ----------- --
-
-- -- --------
------ ----- -------------- - ------- ---- -- ----------
------ ----- ------------- - ---------------
---------------
------- --------- -- -------------
--
------ ----- ----------- - ---------------
---------------
------- --------- -- -----------
--
------ ----- ---------- - ---------------
---------------
------- --------- -- ----------
--在上述示例代码中，我们定义了 AppState 状态、Action 类型、Reducer 和 Effect，它们分别用于描述应用程序的状态、状态变化的类型、状态变化的处理方法和副作用的处理方法。同时，我们还定义了 Selector，用于选择和过滤 AppState 中的数据。
在实际开发中，我们可以通过在组件的构造函数中注入 Store，然后通过 Store.select(selector) 来访问和过滤 AppState 中的状态和数据。
总结
通过使用 Angular 9 和 NgRx，可以更好地管理应用程序的状态和数据流，提高应用程序的可维护性和可扩展性。在实际开发中，我们需要遵循 NgRx 的最佳实践，减少状态的数量，使用 Selector 进行状态过滤，并为每个状态定义一个唯一的标识符。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6532d2017d4982a6eb5c91d0