前言
在前端开发中，我们经常需要将用户行为和外部数据源相结合来创建交互式和动态的应用程序。使用 JavaScript 和 TypeScript 编写这些应用程序时，我们可能会使用 redux 进行状态管理。Redux 是一个流行的 JavaScript 应用程序状态管理库，它提供了一个可预测的状态容器，使得应用程序的状态变更变得简单和可维护。
ngrx 是一个建立在 redux 之上的状态管理库，特别为 Angular 设计。它可以管理应用程序中的状态，并且使得它们更加可预测和可维护。ngrx-utils/effects 是 ngrx 库中的一个重要部分，它提供了一组有用的工具和函数，可以帮助我们更加高效地管理应用程序的副作用。
本文将详细介绍 npm 包 @ngrx-utils/effects 的使用方法，借助实际代码示例来展示其深度和学习以及指导意义。
安装和配置
npm 包 @ngrx-utils/effects 可以通过 npm 或者 yarn 安装：
npm install @ngrx/utils effects
yarn add @ngrx/utils effects
安装完成后，我们需要在应用程序的根模块中导入它，并且将它与应用程序中的 Store 模块集成：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------
------ - ------------ - ---- -------------------
---
-----------
-------- -
----------------------------- - ------------ ---
--------------------------------------
---
--
---
--
------ ----- --------- - -副作用的定义
ngrx-utils/effects 的主要功能之一是管理应用程序中的副作用。在这里，副作用是指与应用程序状态不相交互的任务。例如，当一个用户发出用户登入请求时，我们需要向服务器发送一个 HTTP 请求，并且根据服务器响应来更改应用程序的状态。在这种情况下，发送 HTTP 请求和处理服务器响应的任务都是副作用。
在 @ngrx-utils/effects 中，我们可以定义一个副作用，这个副作用可以拦截特定的 action，并且在 action 被处理之前或者之后运行。下面是一个 @ngrx-utils/effects 副作用的定义示例：
-- -------------------- ---- -------
-------------
------ ----- ------------ -
------------
------- --------- --------
------- ---------- ---------
- --
---------
------- ------------------ - -------------------
---------------------------------------
---------------- --
--------------------------------------------- ------------------------
------
------------ -- -- ----- -------------------------- -------- -------- ----
---------------- -- ---- ----- -------------------------- -------- ----- ---
-
-
--
-在上述代码中，我们定义了一个叫做 MyAppEffects 的副作用。它接受来自 actions$ 的 action 流和一个包含我们真正打算运行的操作（myService）。在这段代码中，我们使用 @Effect() 装饰器来定义了一个名为 login$ 的 observable。
我们可以在 login$ observable 中添加各种运算符链，例如 ofType 用于筛选与特定 ActionType 相匹配的 action；switchMap 用于处理异步操作并进行对应的 action 处理；map 用于操作不同响应，并转换为相应数据格式。catchError 用于处理错误响应。通过将这些操作链接在一起，我们可以配置应用程序如何处理特定的 action。
@ngrx-utils/effects 的常见应用场景
@ngrx-utils/effects 在处理副作用方面非常适合于以下几种应用场景：
- 向服务器发送 HTTP 请求并接收响应；
- 获取响应后更新应用程序的状态；
- 从本地资源中读取数据（例如，localStorage 或 IndexedDB）；
- 通过 WebSocket 接收和发送数据；
- 在应用程序启动期间从服务器获取数据；
- 管理 RxJS Observable 的订阅和取消订阅。
以下是 @ngrx-utils/effects 的示例代码：
-- -------------------- ---- -------
---------
---------- ------------------ - -------------------
-------------------------------------
---------------- --
------------------------
------
------------ -- -- ----- ------------------------- -------- -------- ----
---------------- -- ---- ----- ------------------------- -------- ----- ---
-
-
--
--------- --------- ----- --
-------------- ------------------ - -------------------
------------------------------------------------------
---------------- --
-------------------------------------------
------
---------------- -- -------------------------
-
-
--在上述示例中，我们定义了两个 @ngrx-utils/effects 副作用。loadData$ 副作用负责从服务器中获取应用程序的初始数据。updateServer$ 副作用负责将我们的应用程序状态更新到服务器上。这两个副作用都显式使用 switchMap 来处理异步操作，以及 catchError 来处理错误响应。loadData$ 副作用使用 of(...) 操作符，它将响应数据转换为包含数据值的新 action，并将其发送给 redux Store。但是 updateServer$ 副作用并不会解除 action。
在 loadData$ 副作用中，我们通过 ofType 运算符匹配到特定 ActionType，这样我们就可以处理我们感兴趣的 action。此外，loadData$ 副作用使用了 switchMap 运算符，该运算符用于处理在 action 被处理之前或之后运行的异步操作。在这里，我们调用了 myService.getData() 方法来从服务器端获取数据。我们对响应数据使用 map 运算符进行转换，并将这些数据值用来发送新的 action 到 redux Store。如果我们遇到了一个错误响应，我们则可以使用 catchError 运算符来处理该错误。
updateServer$ 副作用与 loadData$ 副作用相似，但与其不同之处在于，它并不会改变 Store 状态，而是将其上传到服务器。在这里，我们使用 switchMap 运算符将 action 与调用 myService.updateServer() 方法进行链接。如果服务器不接受更新，则运算符返回一个空 observable，否则不返回任何内容。
总结
@ngrx-utils/effects 是管理 redux 应用程序中副作用的一个强大工具，可以使应用程序更加可预测和可维护。在本文中，我们介绍了如何使用 @ngrx-utils/effects 副作用，以及一些常见的应用场景。我们希望通过这篇文章，您能对 @ngrx-utils/effects 有更多的了解和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e244894