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