在 Angular 开发过程中，随着业务逻辑的增加，前端应用状态的管理变得越来越复杂。为了解决这个问题，Angular 社区提供了一种名为 ngrx 的状态管理模式，它可以帮助我们更好地组织和管理应用的状态，提高开发效率和代码质量。
ngrx 简介
ngrx 是一个 Angular 中的状态管理模式，它基于 Redux 架构来管理应用程序状态。Redux 是一个流行的 JavaScript 应用程序状态管理库，它强调在应用程序中实现 “单一数据源” (Single source of truth) 的概念。将应用程序的状态转移到一个中心位置，以便应用程序的代码更加可维护、可预测和可测试。
在 Angular 中使用 ngrx，我们可以建立一个状态管理系统，通过统一的数据流管道实现组件之间状态的交互。其中，ngrx 组成部分如下：
Store: 保存应用程序状态的核心机制。Action: 产生或触发应用程序状态变化的行为。Reducer: 更新应用程序状态的纯函数。Effect: 用于对异步操作进行处理的 RxJS 工具。
使用 ngrx
下面，我们将通过示例代码来演示如何在 Angular 中使用 ngrx 进行状态管理。
Step 1: 安装 ngrx
在开始使用 ngrx 之前，我们首先需要在 Angular 项目中安装 ngrx 模块。通过命令行安装 @ngrx/store 和 @ngrx/effects：
--- ------- ----------- ------------- ------
同时，我们也需要安装 Redux DevTools 来便于我们调试应用程序状态的变化。对于 Chrome 浏览器，可以安装 Redux DevTools 扩展程序。
Step 2: 创建 Store
在我们的示例代码中，我们需要创建一个 Store 来保存应用程序状态。将状态分成多个子状态可以让我们更好地管理应用程序状态。
------ - ----------------- ---------------------- -------------- - ---- -------------- ------ - ----------- -------- - ---- ---------------- ------ - ------------ --------- - ---- ----------------- ------ --------- ----- - ---- --------- ----- ---------- - ------ ----- --------- ----------------------- ---- - - ---- ----------- ----- ----------- -- ------ ----- --------- - ---------------------------- ----------------- ------ ----- ---------- - ------------------------- ----- -- ------------ ------ ----- ---------- - ---------------------------- ------------------- ------ ----- ------------------ - -------------------------- ----- -- -----------------------
我们首先定义了两个子状态 app 和 auth，以及一个状态合并器 reducers。此外，我们还定义了两个选择器 selectApp 和 selectAuth，它们允许我们从 Store 中选择一个特定的子状态。最后，我们定义了两个 Selector getAppData 和 getIsAuthenticated，它们从 selectApp 和 selectAuth 中选择特定的状态切片。
Step 3: 创建 Action
我们创建 Action 是为了在应用程序的状态发生变化时通知 Store。例如，在我们的应用程序中，我们需要创建一个 Login Action:
------ - ------ - ---- -------------- ------ ----- ----- - ------- ------- ------ ----- ------------- - ------- ----- --------- ------ ----- ------------- - ------- ----- --------- ------ ----- ----- ---------- ------ - -------- ---- - ------ ------------------ -------- - --------- ------- --------- ------ -- -- - ------ ----- ------------ ---------- ------ - -------- ---- - -------------- ------------------ -------- - ----- --- -- -- - ------ ----- ------------ ---------- ------ - -------- ---- - -------------- ------------------ -------- - ------ --- -- -- - ------ ---- ----------- - - ----- - ------------ - -------------
在我们的例子中，我们定义了三个 Login Action LOGIN、LOGIN_SUCCESS 和 LOGIN_FAILURE。Login Action 负责处理登录操作的表单提交，LogInSuccess 负责在用户成功登录时更新应用程序状态，LoginFailure 负责在登录操作失败时更新应用程序状态。
Step 4: 创建 Reducer
Reducer 是纯函数，它的主要任务是根据已有的状态和传入的 Action，返回新的状态。和 Redux 一样，在 ngrx 中，Reducers 应该是纯函数，接收两个参数：当前状态和变化请求 (Action)，返回一个新的状态。在我们的示例代码中，我们创建了两个 Reducer：
------ - -------------- -- - ---- --------------
------ - -- ----------- ---- -----------------
------ --------- --------- -
---------------- --------
------ ----
-
----- ------------- --------- - -
---------------- ------
------ ----
--
------ ----- ----------- - --------------
-------------
---------------------------- ------- - ------- -- -- --
---------
---------------- -----
------ -----
----- ------------
----
---------------------------- ------- - ------- -- -- --
---------
---------------- ------
------ -------------
---
--在我们的示例代码中，我们定义了一个名为 authReducer 的 Reducer。它将监听两个 Action LoginSuccess 和 LoginFailure，响应登录成功和登录失败的操作。通过在 Reducer 中使用 on 方法将 Action 与状态处理程序关联。
Step 5: 创建 Effect
Effect 是一个响应 Action 的 RxJS 闭包，它负责捕获主要的业务逻辑、触发外部异步操作等等。在示例代码中，我们创建 AuthEffects，它捕获用于身份验证的 Login Action 并调用另一个 API 服务以进行身份验证。
------ - ---------- - ---- ----------------
------ - -------- ------------- ------ - ---- ----------------
------ - ---------- ---- ---------- - ---- -----------------
------ - ----------- - ---- -----------------
------ - -- ----------- ---- -----------------
------ - -- - ---- -------
-------------
------ ----- ----------- -
------------------- --------- -------- ------- ------------ ------------ --
------ - --------------- --
-------------------
--------------------------
------------------ ------------------ --
--------------------------------------------
-------- -- --- -------------------------- ----- ---- ----
---------------- -- ------ -------------------------- ----- ----
-
-
-
--
-在示例代码中，我们创建了一个 login$ Effect 来拦截 Login Action。在该 Effect 中，我们使用 switchMap 操作符来获取 Login Action 中的 payload 数据并调用 AuthService 中的登录方法。如果登录成功，我们将触发 LoginSuccess Action，否则将触发 LoginFailure Action。
Step 6: 集成 ngrx
最后，我们需要将 Store、Action、Reducer 和 Effect 集成起来，以便在我们的组件中使用 ngrx 状态管理。在 AppModule 中，我们需要导入 StoreModule 和 EffectsModule。
------ - ----------- - ---- --------------
------ - ------------- - ---- ----------------
------ - -------- - ---- -------------
------ - ----------- - ---- -----------------
-----------
-------- -
--------------
-----------------
------------
------------------------------
------------------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在组件代码中，现在我们就可以使用 Store 来存储和管理应用程序状态。例如，在组件中获取 isAuthenticated 状态的方法是：
------ - ---------- ------ - ---- ----------------
------ - ----- - ---- --------------
------ - ---------- - ---- -------
------ - ------------------ - ---- --------------
------------
--------- -------------
--------- -
--------
------ --------
-----
-- ---------------------- - ------ -------------------------------------
-- ------------------------ - ------- -----------------------------
-- ---------------------- - ------ -------------------------------
------
---------
-
--
------ ----- --------------- ---------- ------ -
---------------- --------------------
------------------- ------ ------ --
----------- ---- -
-------------------- - --------------------------------------
-
-在我们的示例代码中，我们使用 store.select 方法来选择仪表板组件中的 isAuthenticated 状态，并使用相应的 getIsAuthenticated 选择器。在 ngOnInit 生命周期钩子中，我们初始化了 isAuthenticated 属性，以获取最新的状态。
总结
Angular 中使用 ngrx 进行状态管理对于大型应用程序而言是至关重要的。它有助于提高代码质量、解决组件之间状态交互的问题，并包括管理异步操作等完整的状态管理机制。在此篇文章中，我们提供了一个简单的示例来演示在 Angular 中使用 ngrx 进行状态管理的方法，并介绍了 ngrx 组成部分，包括 Store、Action、Reducer 以及 Effect。我们希望通过这篇文章，为 Angular 开发者提供一些参考，帮助他们更好地理解 ngrx 状态管理模式，并在实践中运用到自己的项目之中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a6552e48841e98942ed570