前言
在现代的 web 应用程序中，前端通常使用纯 JS 或 JS 框架来构建用户界面。Redux 是现在最受欢迎的状态管理库之一，在使用 Redux 的过程中，常常需要对数据进行规范化处理，以便在应用程序中更好地管理和使用数据。
redux-normalized-crud 是一个方便的 npm 包，它提供了一个针对具有规范化数据结构的 CRUD 操作（即创建、读取、更新和删除）的 Redux 转换器。它帮助您通过简化数据结构、重构 Redux 存储状态和操作来更轻松地管理数据。
本篇文章将引导您完成 npm 包 redux-normalized-crud 的使用教程，并附带示例代码。
安装
使用 npm 包管理器安装 redux-normalized-crud。在命令行输入以下命令：
--- ------- --------------------- ------
基础教程
我们将介绍如何使用 redux-normalized-crud 完成 CRUD 操作。
添加 reducer 和 action
首先，我们需要定义 reducer 和 action。如果您之前使用过 Redux，那么您很熟悉这个过程。
----- - ------------- - - -------------------------------- ----- ----------- - ---------------------- ----- ------- - ---- -- -- ----- ----------- -------- ----- -- ----- ---------- - ---- -- -- ----- -------------- -------- ----- -- ----- ---------- - ---- -- -- ----- -------------- -------- ----- --
在上面的例子中，我们使用 createReducer 函数创建一个名为 users 的 reducer。此外，我们定义了添加、更新和删除用户的 action。
这些 action 应该被分发到 reducer 中以通知其完成相应任务：
----- ----- - -- --- -- ----- ------ -- - --- -- ----- ----- -- ------------------------ --- -- ----- ------ --- --------------------------- --- -- ----- ------- --- --------------------------- --- -- ----- ------ ---
配置 normalize 函数
现在是时候把 redux-normalized-crud 插入到我们的 Redux 存储状态和操作了。redux-normalized-crud 使用 normalizr 库，该库帮助我们规范化数据。建议在开始使用前阅读 normalizr 文档。
让我们定义一个 schema，然后使用它在 normalizr 模块中定义规范化函数：
----- --------- - ------------------------------------------ ----- --------- - -------------------- ----- ---------- - --- ------------------------- - ------------ ---- -- ----- -------------- - ---- -- --------------- -------------
在上面的代码中，我们使用 normalizr 的 Schema 和 normalize 函数来处理规范化操作。将正常化数据作为输入并将规范化数据输出到 Redux 存储状态中。
配置从 store 中检索数据
现在，让我们定义一个 selector 函数，以便在我们的 Redux 存储状态中检索规范化的数据：
----- ------------------ - ----- -- -----------
----- -------- - ----- --
----------------------
--------------------------
-------------
----------------------------
-
---------------------------------------在上述代码中，我们定义 getUsers 函数，该函数将返回规范化的数据。
调用 getUsers(store.getState()) 将返回我们的规范化数据，代码如下：
-
------ -
- --- -- ----- ------ --
- --- -- ----- ------ --
- --- -- ----- ------- -
--
--------- - ------ - ---- - --- -- ----- ------ -- ---- - --- -- ----- ------- -- ---- - --- -- ----- ------ - - -
-完整的代码示例
下面是对上述所有部分的完整示例代码：
----- - ------------- - - --------------------------------
----- --------- - ------------------------------------------
----- --------- - --------------------
----- ---------- - --- ------------------------- - ------------ ---- --
----- ----------- - ----------------------
----- ------- - ---- -- --
----- -----------
-------- -----
--
----- ---------- - ---- -- --
----- --------------
-------- -----
--
----- ---------- - ---- -- --
----- --------------
-------- -----
--
----- ----- - -- --- -- ----- ------ -- - --- -- ----- ----- --
----- -------------- - ---- -- --------------- -------------
----- ------------------ - ----- -- -----------
----- -------- - ----- --
----------------------
--------------------------
-------------
----------------------------
-
----- ----- - ------------
------------
-
------ -----------------------------
--------- -------------------------------
--
-----------------------
-
---------------------------------------
------------------------ --- -- ----- ------ ---
--------------------------- --- -- ----- ------- ---
--------------------------- --- -- ----- ------ ---结论
redux-normalized-crud 提高了 Redux 开发人员的代码质量和代码的规范化程度。它提供了方便的工具来处理规范化操作，包括从 Redux 存储状态中检索规范化的数据。此外，它的使用也提高了代码的可读性和可维护性。
建议您在实际项目中使用 redux-normalized-crud，以提高代码的质量和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671a530d09270238224a3