作为前端开发者，我们需要不断地寻找并应用优秀的工具以提高我们的开发效率。@ngrx/entity 就是其中一个相对优秀的工具，它可以用于帮助 Angular 应用程序中的状态管理。在本文中，我们将介绍 @ngrx/entity 是什么、它的主要功能、它的优势、它的使用教程、以及几个示例代码。
@ngrx/entity 是什么？
@ngrx/entity 是一个用于帮助 Angular 应用程序进行状态管理的库。它提供了解决方案来管理通过实体定义表示的状态，这意味着我们可以轻松地将状态转换为实体形式。@ngrx/entity 通过使用实体 ID 描述实体和选择实体，从而简化了状态管理和查询。同时，它也提供了一个整合机制，可用于将多个状态切片连接在一起。@ngrx/entity 提供了更好的性能并且减少了代码的复杂性。
@ngrx/entity 的主要功能
- 通过实体 ID 表示实体
- 降低代码的重复率
- 管理实体选择
- 整合不同的状态切片
- 提升性能
@ngrx/entity 的优势
- 提供更好的性能，减少了代码的复杂性
- 通过管理实体选择，降低了错误率
- 解决了实体定义状态的复杂性，提高了代码的可读性
- 整合了不同的状态切片来减少冗余状态，减轻了状态管理的负担
@ngrx/entity 的使用教程
在本教程中，我们将提供一个基于 ngrx/entity 的简单示例。
首先，我们需要安装 @ngrx/entity 包。
npm install @ngrx/entity --save
接下来，我们需要引入 @ngrx/entity 到我们的 Angular 应用程序中。
-- -------------------- ---- ------- ------ - ------------ -------------- ------------------- - ---- --------------- ------ --------- ---- - --- ------- ----- ------- - ------ --------- --------- ------- ----------------- -- ------ ----- -------- ------------------- - --------------------------- --------- ------ ----- -- -------- ---
我们定义了一个 User 类型和 UserState 类型。UserState 继承了 EntityState 类型，并且指定了 User 类型作为实体。
使用 createEntityAdapter 方法创建了一个适配器。它需要一个选项对象，其中包括选择实体 ID 的功能。此处我们指定了根据 User 对象的 'id' 属性来选择 ID。
我们还需要创建一个 reducer：
-- -------------------- ---- -------
------ - -------------- --- -------------- - ---- --------------
------ - ------------ -------------- ------------------- - ---- ---------------
------ - -- ------------ ---- ------------------
------ --------- ---- -
--- -------
----- -------
-
------ --------- --------- ------- ----------------- --
------ ----- -------- ------------------- - ---------------------------
--------- ------ ----- -- --------
---
------ ----- ------------- --------- - --------------------------
------ ----- ------------ - --------------
-------------
------------------------ ------- - ---- -- --
-------------------- ------
--
--------------------------- ------- - ---- -- --
----------------------- ------
--
------------------------- ------- - ----- -- --
---------------------- ------
--
---------------------------- ------- - ----- -- --
------------------------- ------
--
--------------------------- ------- - ------ -- --
------------------------- ------
--
---------------------------- ------- - ------- -- --
--------------------------- ------
--
--------------------------- ------- - -- -- --
--------------------- ------
--
---------------------------- ------- - --- -- --
----------------------- ------
--
-------------------------- ------- - ----- -- --
--------------------- ------
--
--------------------------- ----- -- -------------------------
--
------ ----- -
----------
---------------
----------
------------
- - -----------------------
------ ----- ------------- - ---------------
----------
------- ------- -- -------------- -- --------
--在上面的代码中，我们调用了 createReducer 方法来创建一个 reducer，它作为 usersReducer 导出。在 reducer 中，我们定义了一些针对不同操作的 reducer 函数，并在每个函数中调用了适配器的方法。
在 actions 中，我们定义了这些 reducer 可以响应的操作。如下所示：
-- -------------------- ---- ------- ------ - ------------- ----- - ---- -------------- ------ - ---- - ---- ------------------ ------ ----- ------- - ------------- ----------- --- ------ ------- ----- ---- ---- -- ------ ----- ---------- - ------------- ----------- ------ ------ ------- ----- ---- ---- -- ------ ----- -------- - ------------- ----------- --- ------- ------- ------ ------ ---- -- ------ ----- ----------- - ------------- ----------- ------ ------- ------- ------ ------ ---- -- ------ ----- ---------- - ------------- ----------- ------ ------ ------- ------- ------------ ---- -- ------ ----- ----------- - ------------- ----------- ------ ------- ------- -------- -------------- ---- -- ------ ----- ---------- - ------------- ----------- ------ ------ ------- --- ------ ---- -- ------ ----- ----------- - ------------- ----------- ------ ------- ------- ---- -------- ---- -- ------ ----- --------- - ------------- ----------- ---- ------- ------- ------ ------ ---- -- ------ ----- ---------- - ------------------------ ----- --------
最后，我们需要在我们的组件中使用选择器来选择和更新我们需要的实体。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ ------ - ---- --------------
------ - ---- - ---- ------------------
------ -
--------
---------
-----------
------------
-----------
------------
-----------
------------
----------
-----------
- ---- ------------------
------ -
--------------
---------------
----------
------------
- ---- ------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
------ - -----------------------------------
------ - -------------------------------------
--------- - ----------------------------------------
------------------- ------ ------- ------ ------ --- --
----- -
--------------------
---------
----- -
--- ----------------------- - ----
----- ----- ------------------------- - ------
--
--
--
-
-------- -
--------------------
------------
----- -
--- --
----- ----- ------------------------- - ------
--
--
--
-
--------- -
--------------------
----------
------ -
-
--- ----------------------- - ----
----- ----- ------------------------- - ------
--
-
--- ----------------------- - ----
----- ----- ------------------------- - ------
--
--
--
--
-
------------ -
--------------------
-------------
------ -
-
--- --
----- ----- ------------------------- - ------
--
-
--- --
----- ----- ------------------------- - ------
--
--
--
--
-
-------- -
--------------------
------------
------- -
--- --
-------- -
----- ----- ------------------------- - ------
--
--
--
--
-
------------ -
--------------------
-------------
-------- -
-
--- --
-------- -
----- ----- ------------------------- - ------
--
--
-
--- --
-------- -
----- ----- ------------------------- - ------
--
--
--
--
--
-
-------- -
-------------------------------- --- --- ----
-
------------ -
--------------------------------- ---- ----- ---- ----
-
------ -
--------------------
-----------
------ -
-
--- --
----- ----- ---
--
-
--- --
----- ----- ---
--
-
--- --
----- ----- ---
--
--
--
--
-
------- -
----------------------------------
-
-这里定义了一些包含一些简单操作的组件。我们可以使用这些操作来测试和检查实体的行为和性能。
示例代码
一个 @ngrx/entity 示例代码，包含一个用户列表的添加、删除和编辑功能。
-- -------------------- ---- -------
---- ------------------ ---
-----
------------- --------------- - ------ --- ---- ---- ----------
--------------
------- ------------- ------------------- -------------
--- --
----
--- ----------- ----- -- ------ - -------
------ -- ------ - ---------- ------
-------- -- ------ - ------------ ------
------- ------------- -------------------- - --------------
---- ----
---------
------- ------------- ---------------------- - --------------
------ ----
---------
-----
-----
---------------
------------ ----------
--------------
-------------------
--------------------
-------------------------
-----------------
--------------
-------- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------
------ - ------ ------ - ---- --------------
------ - ---------- - ---- -------
------ - --- - ---- -----------------
------ - ---- - ---- ------------------
------ -
--------
-----------
-----------
---------------
- ---- ------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
------- ------------------ - ----------------------------------------
-------- ----------------- - ----- - -----------------------------------------
---------- --------------- - ---------- - ------------------
------ -- --- - -------------------------------------- - -- --------------- - -----------
--
------------------- ------ ------- ------ ------ --- --
----- -
----------------------------- ----- - --- --- ----- -- - ----
--------------
-
-------- ------- -
---------------------------------- -- ----
-
---------- ------- -
-------------------------------- -- ----
----------------
-
------------ ----- -
-- -------- --- --- -
----------------------------- ---- ----
- ---- -
-------------------------------- ------- - --- --------- -------- ---- - ----
-
----------------
-
--- -------------------- ---- -------
-- ----------------
------ - ------------- ---------------------- -------------- --------------- --- ----- - ---- --------------
------ - ------------ -------------- ------------------- - ---- ---------------
------ --------- ---- -
--- -------
----- -------
-
------ --------- --------- ------- ----------------- -
---------- ------ - -----
-
------ ----- -------- ------------------- - ---------------------------
--------- ------ ----- -- --------
---
------ ----- --------------- - --- --------- -- ------------------------- ---------- ---- ---
------ ----- ------- - -------------
-------- --- ------
------- ----- ---- ----
--
------ ----- ---------- - -------------
-------- ------ ------
------- ------- - --- ------- -------- ------------- - ----
--
------ ----- ---------- - -------------
-------- ------ ------
------- --- ------ ----
--
------ ----- ------------ - -------------
-------- --- ------- ----
------- --- ------ - ---- ----
--
------ ----- ------------------ - ------------------------------------------
------ ----- --------------- - ---------------
-------------------
------- ---------- -- ---------------
--
------ ----- -
---------- --------------
--------------- -------------------
---------- ---------------
------------ ----------------
- - -----------------------
------ ----- -------------- - ---------------
-------------------
---------- ------ -- ------------------
--
------ ----- ------------ - --------------
------------------
----------- ------- - ---- -- -- --
---------
---------- --------
----------------------- -------
----
-------------- ------- - ------ -- -- --
---------
---------------------------- -------
----
-------------- ------- - -- -- -- --
---------
------------------------ -------
----
---------------- ------- - -- -- -- --
---------
---------- ---
---
--<!-- user-edit.component.html -->
<div>
<form (submit)="submit()">
<input type="text" [(ngModel)]="user.name" />
<button type="submit">Save User</button>
<button type="button" (click)="close.emit()">Close</button>
</form>
</div>-- -------------------- ---- -------
-- ----------------------
------ - ---------- ------ ------- ------------ - ---- ----------------
------ - ---- - ---- -------------------
------------
--------- ----------------
------------ -----------------------------
---------- ------------------------------
--
------ ----- ----------------- -
-------- ------- -----
--------- ----- - --- ---------------------
--------- ------ - --- ---------------------
--- ------- ---- -
------ ---------- -- - --- ----- ----- -- --
-
---------------- ---------------- -
-- ---------------------- -
----------------------------
-
-
-以上是对 @ngrx/entity 的使用教程及示例代码的详细说明，希望它能帮助你更好的进行 Angular 应用程序中的状态管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/ngrx-entity