介绍
在 Angular 应用中，使用 ngrx 管理应用状态是非常方便和必要的。ngrx 是一个基于 Redux 架构的状态管理库，但是使用起来却比原生的 Redux 更加简便。@ngrx/store 是 ngrx 的核心库，它提供了一个基于 RxJS 的数据流管理机制。但是，有时候我们还需要更多的功能，比如异步操作、批量操作、状态持久化等。这时候，@nll/ngrxtras 就显得尤为重要。
@nll/ngrxtras 是一个基于 @ngrx/store 的功能增强库，它提供了以下功能：
- 支持异步操作和批量操作
- 支持管道操作符
- 支持状态持久化和恢复
在本文中，我们将详细介绍 @nll/ngrxtras 的使用，帮助大家更好地使用 ngrx 管理应用状态。
安装
首先，我们需要在项目中安装 @nll/ngrxtras。可以使用 npm 安装：
npm install @nll/ngrxtras --save
@nll/ngrxtras 需要一些 rxjs 操作符，所以我们还需要安装它们：
npm install rxjs-compat --save
使用
基本用法
首先，我们需要在应用中引入 @ngrx/store 和 @nll/ngrxtras：
-- -------------------- ---- -------
------ - ------ ------ - ---- --------------
------ - ---------- - ---- -------
------ - --------- - ---- -----------------
------ - -------- ------- -------- ----------------- - ---- ------------------
-----------
-------- -
------------------------------
---------------------------
--
-- ---
--
------ ----- --------- --StoreExtrasModule 是 @nll/ngrxextras 的主模块，我们需要将它添加到应用的 imports 中。
然后我们使用 createAction 函数创建 Action，接着定义 reducer 和 effects：
-- -------------------- ---- -------
------ - ------------- ------ ----- - ---- --------------
------ - ------------- -------- ------ - ---- ----------------
------ - ---------- ---------- --- - ---- -----------------
------ - -- -------- ---- --------------
------ ----- --------- - ----------------------- ------------
------ ----- --------- - ----------------------- ------------
------ ----- ----- - ----------------------- --------
-------------
------ ----- -------------- -
---------- - --------------- --
-------------------
------------------
------------ -- ----------------
----------------------------
-----------------------
-------------- ---------- ------
---
----------- -- ------------------ -------- ------- - - ---
--
-
--
-- --- ---- -- ---- ----
-这段代码与原生的 ngrx 代码相比，并没有太大的区别。需要注意的是，在 increment effect 中我们使用了 action$ 和 batch$ 操作符。这两个操作符都是 @nll/ngrxextras 中提供的。
action$可以在takeUntil中使用，来取消某个操作或一些操作。batch$可以在多个操作之间建立批量操作。
action$ 和 batch$ 在使用上都可以像正常的 Action 一样使用，但是它们是 Observable，所以在使用时需要使用 ofType 操作符进行筛选。
状态持久化
@nll/ngrxextras 也提供了状态持久化和恢复的功能。如果我们希望在应用关闭时保存状态，并在下次打开时恢复状态，可以使用 ngrxPersistStore 函数：
-- -------------------- ---- -------
------ - ---------------- - ---- ------------------
----- ------------- - -
---- -------
-------- ------------
--
-----------
-------- -
------------------------------
----------------------------
----------------------------------------
-------------------------------- ------- -- --
--
-- ---
--
------ ----- --------- -
------------------ ---------------- -
----------------------- ---------------
-
-ngrxPersistStore 接收 Store 和配置参数 persistConfig，其中 storage 表示持久化存储使用的工具，可以是 localStorage、sessionStorage 或 自定义的工具类。
管道操作符
@nll/ngrxextras 还提供了一些管道操作符。我们可以在 Store 或 Effect 中使用这些操作符。下面是一些常见的操作符：
switchMapTakeUntil：将takeUntil与switchMap结合使用。当触发takeUntil时，会取消switchMap中的 observable。takeUntilDelayError：将takeUntil与delay和catchError结合使用。当catchError返回一个Observable时，会等待delay时间后再终止 observable。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- ------- ------------ - ---- ----------------
------ - ------------------- ----------- ------------------- - ---- ------------------
------ - --- - ---- -----------------
------ - ---------- - ---- --------------
-------------
------ ----- -------------- -
---------- - --------------- --
-------------------
------------------
--------------------- --
----------------------------------------
--------------------------------------------------
--------------------------- --
-------------
-----------------------
--
-
------ -----
------------- ---------- -------
-
-
-
--
------ -- ---------------------- ----------
-
--
-- --- ---- -- ---- ----
-示例代码
下面是一个简单的计数器应用，使用 ngrx 和 @nll/ngrxextras 来管理状态。
-- -------------------- ---- -------
-- -------------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- --------------
------ - ------------- - ---- ----------------
------ - ------------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - -------------- - ---- ------------
------ - -------- - ---- -------------
------ - -------- ------- --------- -------- ----------------- - ---- ------------------
----- ------------- - -
---- -------
-------- ------------
--
-----------
-------- -
--------------
------------------------------
----------------------------
----------------------------------------
-------------------------------- ------- -- --
--
------------- ---------------
---------- --------------
--
------ ----- --------- -
------------------ ---------------- -
----------------------- ---------------
-
-
-- ----------------
------ - ---------- ------ - ---- ----------------
------ - ------ ------ - ---- --------------
------ - ---------- - ---- -------
------ - --------- - ---- -----------------
------ - -------- ------- ------- - ---- ------------------
------ - ---------- ---------- ----- - ---- ------------
------ - -- -------- ---- -------------
------------
--------- -----------
--------- -
-----
------------ -- -------- - ----- -------
------- ----------------------------------------
------- ----------------------------------------
------- --------------------------------
------
-
--
------ ----- ------------ ---------- ------ -
--------- -------------------
------------------- ------ ---------------- --
---------- -
------------- - ----------------
----------------------------
-----------------------
-------------- ------
--
--
-
----------- -
---------------------------------
-
----------- -
---------------------------------
-
------- -
-----------------------------
-
-
-- ----------
------ - ---------- - ---- ----------------
------ - -------- ------- ------------ - ---- ----------------
------ - ------------------- ----------- ------------------- - ---- ------------------
------ - --- - ---- -----------------
------ - ---------- - ---- --------------
-------------
------ ----- -------------- -
---------- - --------------- --
-------------------
------------------
--------------------- --
----------------------------------------
--------------------------------------------------
--------------------------- --
-------------
-----------------------
--
-
------ -----
------------- ---------- -------
-
-
-
--
------ -- ---------------------- ----------
-
--
---------- - --------------- --
-------------------
------------------
--------------------- --
----------------------------------------
--------------------------------------------------
--------------------------- --
-------------
-----------------------
--
-
------ -----
------------- ---------- -------
-
-
-
--
------ -- ---------------------- ----------
-
--
-- --- ---- -- ---- ----
-
-- ----------
------ - ------------ - ---- --------------
------ ----- --------- - ----------------------- ------------
------ ----- --------- - ----------------------- ------------
------ ----- ----- - ----------------------- --------
-- -----------
------ - ------- -------------- -- - ---- --------------
------ - ---------- ---------- ----- - ---- ------------
------ --------- ----- -
-------- -------
-
------ ----- ------------- ----- - -
-------- -
--
------ ----- -------------- - --------------
-------------
------------- ----- -- -- --------- -------- ------------- - - ----
------------- ----- -- -- --------- -------- ------------- - - ----
--------- -- -- -------------
--
------ -------- -------------- ----- - ---------- ------- ------- -
------ --------------------- --------
-
------ ----- ---------- - ------- ------ -- --------------
-- --------------
------ - ---------- - ---- ----------------
------ - -- - ---- -------
------ - ----- - ---- -----------------
-------------
----------- ------
--
------ ----- ---------- -
------------------ -
------ --------------
-----------
--
-
------------------ -
------ --------------
-----------
--
-
-- --- ---- -- ---- ----
-总结
@nll/ngrxextras 是一个非常好用的 ngrx 库。它提供了很多常用的功能增强，比如支持异步操作，批量操作，状态持久化等。同时，它还提供了一些管道操作符，可以让我们更方便地使用 ngrx。
在使用 @nll/ngrxextras 时，需要注意 action$ 和 batch$ 操作符的使用，以及需要引入一些观察者操作符。同时，也需要注意 ngrxPersistStore 函数需要在 Store 初始化后调用。
希望本文能够帮助大家更好地使用 @nll/ngrxextras 和 ngrx 来管理应用状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005694281e8991b448e4c38