在前端开发中，使用状态管理工具可以让我们更轻松地管理应用程序中的数据和状态。而 ngrx 是一个流行的状态管理工具，它基于 Redux 架构，并提供了一系列高效的方法来管理数据流。在使用 ngrx 进行开发时，通常需要用到 effects 来处理副作用。而 ngrx-strong-effects 正是针对 effects 的一个 npm 包。
本文将介绍 npm 包 ngrx-strong-effects 的使用教程，以及它的深度和学习以及指导意义。同时，我们也会提供示例代码。
ngrx-strong-effects 简介
ngrx-strong-effects 是基于 ngrx 的一个 npm 包，它提供了一种更加高效、简洁和易于管理的方式来创建和处理 effects。通过使用 ngrx-strong-effects，我们可以更加方便地处理异步操作和副作用，同时也能够更好地组织我们的代码和数据流。
为了更好地理解 ngrx-strong-effects，我们先来看一下在原生 ngrx 中，如何处理 effects。
在原生 ngrx 中，我们需要创建一个类来表示一个 effect，例如：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- ------------- ------ - ---- ----------------
------ - --------- - ---- -----------------
------ - ---------- - ---- ----------------
------ - ---------- -------- - ---- ------------------
-------------
------ ----- ------------ -
---------- - --------------- --
-------------------
------------------
------------ --
--------------------------------
--------- -- ---------- ----- ---
-
-
-
--
------------
------- --------- --------
------- ----------- ----------
- --
-在上面的代码中，我们创建了一个名为 UsersEffects 的类，并在其中声明了一个名为 loadUsers$ 的属性。loadUsers$ 属性是一个 effect，它通过 ofType 方法来筛选出 loadUsers 事件，并通过 switchMap 方法来获取 API 中的用户数据，并将该数据转换为 setUsers 事件。
虽然原生 ngrx 中的处理方法已经非常高效和可靠，但是在处理多个 effects 和大量的异步操作时，代码的复杂度和可读性往往会降低。而 ngrx-strong-effects 就是针对这个问题而产生的。
ngrx-strong-effects 的使用教程
下面我们来介绍 ngrx-strong-effects 的使用教程。
安装
首先我们需要安装 ngrx-strong-effects。在控制台执行以下命令：
npm install ngrx-strong-effects
引入
在我们的项目中引入 ngrx-strong-effects。在 app.module.ts 中，我们需要将 NgrxStrongEffectsModule 引入到 imports 中：
-- -------------------- ---- -------
------ - ----------------------- - ---- ----------------------
-----------
-------- -
-- ---
----------------------------------
--
--
------ ----- --------- --创建 effect
在使用 ngrx-strong-effects 时，我们只需要创建一个类，并使用 @EffectDecorator 来声明我们的 effect，例如：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -------
------ - --- - ---- -----------------
------ - ------ - ---- ----------------------
------ - ------ - ---- --------------
------ - ----------- - ---- -----------------
------ - ----- - ---- ---------------
------ - ---------------- - ---- -----------------
-------------
------ ----- ----------- -
------------------- ------------ ------------ --
--------- -- --- ---- --------- -- ------- ----- ------- -- ------ ---
----------- ------------------ - ----------------
-----------
----------------- -------- -- ------------------ ----- -----
-在上面的代码中，我们创建了一个名为 UserEffects 的类，并在其中使用 @Effect 装饰器来声明了一个名为 loadUsers$ 的 effect。在 loadUsers$ 中，我们使用了 RxJS 中的 map 操作符来对 API 中的响应结果进行转换，并返回了一个名为 loadUsersSuccess 的 action。
注册
为了让 ngrx-strong-effects 能够使用我们的 effect，我们还需要在 app.module.ts 中进行注册，例如：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
------ - ------------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------- - ---- ------------
-----------
-------- -
-- ---
--------------------- ------ ------- ---
-------------------------------------
--
--
------ ----- --------- --在上面的代码中，我们将 UserEffects 注册为一个 effects，并将它添加到 EffectsModule.forRoot() 方法中。
调用
当我们需要触发某个 effect 时，我们只需要在组件中 dispatch 一个与该 effect 相关联的 action 即可，例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----- - ---- --------------
------ - --------- - ---- -----------------
------------
--------- ------------
--------- -
----
--- ----------- ---- -- ------ - -------
-- --------- --
-----
-----
--
--
------ ----- -------- -
------ - ---------------------------
------------------- ------ ------ -
--------------------------------- -- -------- --- ------ ----
-
-在上面的代码中，我们在 constructor 中 dispatch 了名为 loadUsers 的 action，来触发我们之前创建的 loadUsers$ effect。
ngrx-strong-effects 的深度和学习以及指导意义
在使用 ngrx-strong-effects 进行开发时，我们可以将我们的代码和数据流更好地组织起来，使其更具可读性和可维护性。同时，ngrx-strong-effects 的使用也大大简化了我们对异步操作和副作用的处理，让我们能够更加专注地处理数据的流动，从而提升了我们的工作效率。
通过这篇文章，我们深入了解了 ngrx-strong-effects 的使用教程，并探讨了它的深度和学习以及指导意义。我们相信，在使用 ngrx-strong-effects 进行开发时，你会有更好的开发体验和更高的生产力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573e381e8991b448e9c95