随着时间的推移，前端应用程序的规模越来越大，直接影响了代码的可维护性和可扩展性。为了解决这个问题，架构师们提出了一些新的架构风格。其中， Redux 成为了一个广泛使用的方案，尤其在 React 生态中。而 Ngrx 是一个可应用于 Angular 应用程序中的 Redux 实现。
在本篇文章中，我们将学习如何在 Angular 应用程序中使用 Ngrx，以及如何为你的项目提供更好的组织和可扩展性。
1. 安装依赖
我们首先要在应用程序中安装 Ngrx 相关包。运行以下命令：
npm install @ngrx/store @ngrx/effects @ngrx/entity --save
2. 创建应用程序状态
如果你使用过 Redux 的话，对状态管理应该不陌生。Ngrx 实现了 Redux 的核心概念，包括单一数据源、不可变性等。
首先，我们要创建一个状态类来描述当前应用程序的状态。在 Angular 中，我们通常把它放在一个单独的文件中，比如在 /src/app/store/app.state.ts 中。在这个示例中，我们假设我们的应用程序具有一个状态管理所有客户端的客户端列表，因此我们需要创建一个 ClientState 类以保存该列表。
import { Client } from '../models/client.model';
export interface ClientState {
clients: Client[];
loading: boolean;
error: Error;
}注意状态类采用了 TypeScript 的接口定义。
3. 创建匹配器和初始状态
现在，我们需要创建一个匹配器（reducer），它负责响应由应用程序发送的操作（actions）并更新应用程序状态。匹配器的格式应遵循 Redux 的规范，接收前一个状态和一个操作，然后根据操作来计算新的状态。ActionCreators 的工作是发送操作。
-- -------------------- ---- -------
------ - -------------- --- ------ - ---- --------------
------ - ------------ -------------- ------------------- - ---- ---------------
------ - ------ - ---- -------------------------
------ - -- ------------- ---- ----------------------------
------ --------- ----------- ------- ------------------- -
----------------- ------ - -----
-
------ ----- -------- --------------------- - -----------------------------
------------- --- ------- -- ------- -- -----------------------------
---
------ ----- ------------- ----------- - -------------------------
----------------- -----
---
----- ------------- - --------------
-------------
--------------------------- ------- - ------ -- -- -
------ ---------------------- -------
---
------------------------------ ------- - ------ -- -- -
------ ------------------------- -------
---
---------------------------- ------- - ------- -- -- -
------ ------------------------ -------
---
------------------------------- ------- - ------- -- -- -
------ --------------------------- -------
---
------------------------------ ------- - -- -- -- -
------ --------------------- -------
---
------------------------------- ------- - --- -- -- -
------ ----------------------- -------
---
--
------ -------- -------------- ----------- - ---------- ------- ------- -
------ -------------------- --------
-我们还使用了 @ngrx/entity 包，这个包提供了实用程序和开箱即用的还原器来管理应用程序状态中的实体。
在这个示例中，我们创建了一个 adapter 对象，用于管理数据实体。我们还创建了一个 initialState，它包含了应用程序的初始值和任何必要的属性。
然后，我们定义了一个 clientReducer，定义了我们的应用程序的各种操作，并返回新的状态。最后，我们导出一个 reducer 函数来管理所有的操作。
4. 创建一个效果（Effect）
Effect 是一个用于响应异步操作的 Redux 应用程序的核心概念。Effect 运行在应用程序状态间，并响应操作到达时与其交互。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- ------------- ------ - ---- ----------------
------ - --------- --- - ---- -----------------
------ - ------------- - ---- -----------------------------
------ - -- ------------- ---- ----------------------------
-------------
------ ----- ------------- -
------------ - --------------- -- -------------------
----------------------------------
----------- -- ------------------------------------
----------- -- ----------------------------- ------- ----
---
------------
------- --------- --------
------- -------------- --------------
- --
-在这个示例中，我们定义了一个 loadClients$ Effect，它用来处理 loadClients 操作（这个操作由一个 actionCreator 生成）。我们使用 mergeMap 帮助我们从服务中获取客户端列表，然后用 map 操作符将获取的数据转换为 upsertClients 操作（也由一个 actionCreator 生成）。
当浏览器通过 HTTP 请求获取数据时，将调用从服务中获取客户端列表的 clientService.getAllClients() 方法。
需要注意的是，我们需要将此 Effect 注册在 AppModule中：
-- -------------------- ---- -------
-----------
------------- -
-------------
--------------------
--
-------- -
--------------
-----------------
-----------------
------------------------
---------------------------------------
--------------------------------- --------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -5. 创建 Action Creators
Action Creators 是用于创建操作的工厂，在我们的示例中，我们定义了如下操作：
-- -------------------- ---- ------- ------ - ------------- ----- - ---- -------------- ------ - ------ - ---- ------------------------- ------ ----- ----------- - ---------------------- ---- ---------- ------ ----- --------- - ------------- --------- --- -------- ------- ------- ------ ----- -- ------ ----- ------------ - ------------- --------- ------ -------- ------- ------- ------ ----- -- ------ ----- ---------- - ------------- --------- --- --------- ------- -------- -------- ----- -- ------ ----- ------------- - ------------- --------- ------ --------- ------- -------- -------- ----- -- ------ ----- ------------ - ------------- --------- ------ -------- ------- --- ------ ----- -- ------ ----- ------------- - ------------- --------- ------ --------- ------- ---- -------- ----- --
如上代码中，我们使用 createAction 函数创建了我们的操作。
6. 修改组件
最后，我们需要在需要访问和使用我们刚刚创建的数据和操作的组件中使用 store、actions 和 selectors。这是做出任何更改的主要位置。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -------
------ - ----- - ---- --------------
------ - -- ------------- ---- ----------------------------
------ - -- ---------- ---- -----------------------------
------ - ------ - ---- -------------------------
------------
--------- ------------------
------------ -------------------------------
---------- --------------------------------
--
------ ----- ------------------- ---------- ------ -
--------- ---------------------
--------- --------------------
------- ------------------
------------------- ------ ------------------------ - -
----------- ---- -
-------------------------------------------------
------------- - ----------------------------------------
------------- - --------------------------------------------
----------- - ------------------------------------------
-
------------- -
----- ---------- - -
--- ------
----- ----- --------
--
--------------------------------------------- ------- ---------- ----
-
-在组件中，我们注入了在 AppModule 中创建的 Store 对象。然后我们初始化了三个 Observable，它们用于在组件中绑定状态。需要注意的是，Observable 是响应式编程的核心概念，也是 Angular 中的一个核心概念。
总结
在本文中，我们学习了如何使用 Ngrx 来管理你的应用程序状态。我们已经了解了如何创建适当的状态、匹配器和操作，并如何将其与您的组件集成。这些技术可以帮助你的应用程序充分利用 Redux 的强大功能，带来优秀的结构和扩展性。如果你是一个前端开发者，并且你正在构建一个大型的应用程序，我们强烈建议你使用 Ngrx 的技术来管理你的状态和数据流。
完整代码示例见：https://github.com/LukeLin26/angular-ngrx-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6479610e968c7c53b0569006