简介
Ngrx-crud 是一个基于 ngrx 实现的用于快速开发 CRUD 操作的 npm 包。通过简单的配置，你能够快速地实现此类操作。本篇文章将详细介绍 ngrx-crud 的使用教程及相关指导意义。
安装
在使用 ngrx-crud 之前，您需要先安装相关依赖，包括 @ngrx/store、@ngrx/effects 内容。在命令行中输入以下命令：
$ npm install @ngrx/store @ngrx/effects ngrx-crud --save
配置
创建模型
首先，我们需要为应用程序定义一个数据模型。对于一个 TODO 应用的例子，我们可以定义一个叫做 Todo 的模型。
// todo.ts
export interface Todo {
id: string;
title: string;
completed?: boolean;
}创建状态和 Reducer
接下来，我们将为 Todo 定义一个状态，并编写需要的 reducer、action 和 effect。以下是如何定义一个状态的示例：
-- -------------------- ---- ------- -- --------------- ------ - ------------ ------------------- - ---- --------------- ------ - -------------- -- - ---- -------------- ------ - ---- - ---- --------- ------ - ----------- - ---- ----------------- ------ --------- ---------- ------- ----------------- -- ------ ----- ------- - ---------------------------- ------ ----- ------------- ---------- - ---------------------------- ------ ----- ----------- - -------------- ------------- -------------------------------- ------- - ----- -- -- --------------------- -------- --------------------------------- ------- - ---- -- -- -------------------- -------- --------------------------------- ------- - ------ -- -- ------------------------- -------- --------------------------------- ------- - -- -- -- --------------------- ------- --
创建 Action 和 Effect
-- -------------------- ---- ------- -- --------------- ------ - ------------- ----- - ---- -------------- ------ - ---- - ---- --------- ------ ----- --------- - -------------------- ---- -------- ------ ----- ---------------- - ------------- ------- ---- ----- --------- ------- ------ ------ ---- -- ------ ----- ------------- - -------------------- ---- ----- ------- ------ ----- ---------- - -------------------- ------ ------ ------- ------ ------ ------ ------ ----- ----------------- - -------------------- ------ ---- --------- ------- ----- ---- ------ ------ ----- -------------- - -------------------- ------ ---- ------- ------ ----- ---------- - ------------- ------- ------ ------ ------- --- ------- -------- ------------- ---- -- ------ ----- ----------------- - ------------- ------- ------ ---- --------- ------- ------- --- ---- -- ------ ----- -------------- - -------------------- ------ ---- ------- ------ ----- ---------- - -------------------- ------ ------ ------- --- ------ ------ ------ ----- ----------------- - -------------------- ------ ---- --------- ------- --- ------ ------ ------ ----- -------------- - -------------------- ------ ---- -------
-- -------------------- ---- -------
-- ---------------
------ - ---------- - ---- ----------------
------ - -------- ------------- ------ - ---- ----------------
------ - ----------- ---- -------- - ---- -----------------
------ - -- - ---- -------
------ - ----------- - ---- -----------------
------ - ----------- - ---- -----------------
-------------
------ ----- ----------- -
---------- - --------------- --
-------------------
------------------------------
----------- --
---------------------------------
----------- -- ------------------------------ ----- ----
------------- -- --------------------------------
-
-
-
--
----------- - --------------- --
-------------------
-------------------------------
----------------- --
-----------------------------
------ -------------
---------- ------
--------
---------- -- ------------------------------- ---- ----
------------- -- ---------------------------------
-
-
-
--
----------- - --------------- --
-------------------
-------------------------------
----------------- --
-----------------------------
--- ----------
-------- ---------------
--------
------------ -- ------------------------------- ------ ----
------------- -- ---------------------------------
-
-
-
--
----------- - --------------- --
-------------------
-------------------------------
----------------- --
--------------------------------------------
------ -- ------------------------------- --- --------- ----
------------- -- ---------------------------------
-
-
-
--
------------------- --------- -------- ------- ------------ ------------ --
-创建服务
下一步，我们将创建一个服务来管理数据，TodoService 会使用 HttpClient 发送 HTTP 请求到服务器。
-- -------------------- ---- -------
-- ---------------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
------ - ---- - ---- ---------
-------------
----------- -------
--
------ ----- ----------- -
------- ------- - ---------------------------------------------
------------------- ----- ----------- --
----------- ------------------ -
------ ---------------------------------------------------
-
---------------- ------ ---------------- -
------ ---------------------------------- ------
-
------------------ ----- --------------- -
----- - --- ---------- - - -------
------ -------------------------------------- ---------
-
-------------- -------- --------------- -
------ ------------------------------------------
-
-导入模块
最后一步是将状态、action 和 effect 组合起来，并将 todoReducer 作为主 Reducer 导入应用程序的 Store 中。
-- -------------------- ---- -------
-- -------------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ---------------- - ---- -----------------------
------ - ----------- - ---- --------------
------ - ------------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- -----------------
------ - ----------- - ---- -----------------
-----------
------------- ---------------
-------- -
--------------
-----------------
--------------------- ------ ----------- ---
-------------------------------------
--
---------- ---
---------- ---------------
--
------ ----- --------- --使用
在组件中使用
现在，我们可以在组件中使用 ngrx-crud。在 Todo 组件中，我们通过将 ngrx-crud 相关函数绑定到组件的方法中，并为 ngrx-crud 提供配置对象，如下所示：
-- -------------------- ---- -------
-- -----------------
------ - --------- - ---- ----------------
------ - ----- - ---- --------------
------ - ---------- - ---- -------
------ - ---- - ---- ---------
------ - ----------- - ---- -----------------
------ - -------------- - ---- -------------------
------ - ----------- ----------- - ---- ------------
------------
--------- -----------
--------- -
-------- ---------
---- ----------- ---- -- ------ - -------
------ --------------- -------------------------- ----------------------- --
-- ---------- --
------
------ ----------- --------------------- ---------------- ----- --
------- -------------------------- -------------
--
--
------ ----- ------------- -
------- ------------------ - ----------------------------------
------------ ------------------
------- ---------- - -
------------ -----
----------- -------
----- -- -- ---------------------------------------------
------- ------ ----- -- ------------------------------
------- ------ ----- -- ------------------------------
------- ---- ------- -- ----------------------------
--
------- - ---
------------------- ------ ----------- -
---------------- - --- ------------------------ - ----- ------- ---
-
------------ ----- -
------------------------- -------- ---------- --------------- ---
-
------------ -
-- ---------------------- -
-------
-
------------------------- ------ ------------ ---
------------ - ---
-
-以上代码中，我们创建了 Todo 组件。组件中我们使用了 ngrx-crud 的增删改查 CRUD 操作，使用方法非常简单。为了在组件中使用 ngrx-crud，我们首先创建了一个 CrudService，并在构造函数中将 Store 传递给了服务。在下面的代码片段中，我们还创建了一个 CRUD 配置对象，该对象将 name（实体名）、idFieldName（主键字段名）和由我们提供的每个 CRUD 操作指定的标准操作打包后发送到 CrudService 的 constructor 中。
总结
本文详细介绍了如何使用 ngrx-crud 实现快速开发 CRUD 操作，包括如何创建模型、状态、Reducer、Action 和 Effect、服务以及如何在组件中直接使用 ngrx-crud 完成 CRUD 操作。希望通过本篇文章，您可以在自己的前端项目中更好地应用 ngrx-crud 来简化状态管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671d81e8991b448e37a8