什么是 @ngrx/effects?
@ngrx/effects 是 Angular 应用程序中常用的一种工具，它提供了一种可重用的方式来处理副作用，包括读取和写入状态以及与外部系统进行交互。@ngrx/effects 可以用于处理异步代码，网络请求、HTTP请求、WebSockets等等，这使得管理应用程序副作用的代码变得更加简单，可维护和可扩展。
@ngrx/effects 怎么用?
下面我们将通过以下步骤来学习如何使用 @ngrx/effects。
第一步：安装 @ngrx/effects
打开命令行窗口并导航到你的 Angular 项目根目录。输入以下命令来安装 @ngrx/effects。
npm install @ngrx/effects --save
第二步：定义 effects 类
在 Angular 项目中，我们需要创建一个专门的 effects 类，该类负责定义应用程序的副作用，包括异步操作和外部系统交互。下面是一个示例 effects 类的基本代码。
------ - ---------- - ---- ----------------
------ - ------- -------- ------ - ---- ----------------
------ - ----------- -- - ---- -------
------ - ---- --------- ---------- - ---- -----------------
------------- ------ ----- ----------- -
------------------- --------- -------- --
--------- ---------- ------------------ - -------------------
------------------------------
----------- --
--------------------------------------------- -- ---- -------------------------------------------------------- -- ------ ----------------------------------------
-在这个示例代码中，我们定义了一个名为 UserEffects 的 effects 类。该类包含了一个名为 getUsers$ 的 Effect，这是一个用来获取用户的异步操作。它使用了一个名为 UserService 的服务来获取用户，并在获取成功和失败时触发了两个不同的 Action。
第三步：运行 effects 类
在 Angular 项目中，我们需要将 effects 类添加到应用程序模块的 providers 数组中以便应用程序能够正确的运行副作用。为此，我们需要打开 app.module.ts 文件并添加以下代码。
------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ----------- - ---- ------------- ------ - ------------- - ---- --------------- ------ - ----------- - ---- ----------------- ------ - ----------- - ---- ----------------- ----------- -------- - -------------- ------------------------ ------------------------------------ -- ------------- - ------------ -- ---------- - ----------- -- ---------- - ------------ - -- ------ ----- --------- - -
在这个示例代码中，我们将 UserEffects 类添加到 EffectsModule 的 providers 数组中来运行。我们还将 UserService 添加到 providers 数组中，以确保用户服务能够被注入到 UseEffects 类中来获取用户。
第四步：使用 effects 类
在 Angular 项目中，我们可以使用 Actions 类来触发我们的副作用。下面是一个使用 @ngrx/effects 获取用户并更新状态的完整示例。
------ - --------- - ---- ----------------
------ - ----- - ---- --------------
------ - ---------- - ---- -------
------ - ---- - ---- ----------------------
------ - -------- - ---- --------------
------ - -------- - ---- -------------------------
------------
--------- -----------
--------- -
-------- -- ----------
----
--- ----------- ---- -- ------ - --------- --------- -------
-----
-
--
------ ----- ------------ -
------- -------------------
------------------- ------ ---------------- -
----------- - ------------------ -- ------------------
-
---------- -
----------------------- ------------
-
-在这个示例代码中，我们使用了 Store 类别获取应用程序中的状态，并使用 Actions 类来分派操作。我们还使用了 Angular 的 Async Pipe 来订阅并展示用户列表。
总结
经过以上的介绍，我们已经学习了 @ngrx/effects ，包括其基本定义和用法。我们了解了如何编写一个 effects 类来处理各种异步操作，并将其添加到 Angular 应用程序中。最后，我们还使用实际示例来演示了如何使用 @ngrx/effects 控制应用程序状态。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/ngrx-effects