前言
在开发前端应用时，随着业务的复杂度增加，数据状态的管理也越来越困难。为了更好地组织数据状态，我们需要使用状态管理库。
redux 是目前最流行的一个状态管理库，它的设计理念简单明了，而且与 React 配合非常默契。在使用 redux 过程中，我们经常需要写很多的重复性代码，比如 reducer、action 等等。
为了简化 redux 的使用，redux-entities 库应运而生。本文将介绍 redux-entities 的使用教程。
redux-entities 的作用
redux-entities 是一个用于简化数据状态管理的库，它可以帮助我们自动生成 reducer、action 的代码，并提供一些辅助函数来简化我们的编码工作。
redux-entities 的主要作用是：
- 自动生成常规的 reducer、action 代码；
- 提供常用的辅助函数，例如 normalize、denormalize 等，方便我们对数据进行转换和处理；
- 使 reducer 更易于维护和扩展。
redux-entities 的安装和使用
redux-entities 可以通过 npm 安装：
npm install redux-entities --save
使用 redux-entities 的时候，我们需要定义一个 schema，来描述数据的结构和关系。schema 的定义如下：
{
entityName: {
},
...
}其中 entityName 为实体名称，可以是任意字符串，用于区分不同的实体。下面是一个简单的 schema 示例：
{
users: {},
posts: {}
}该 schema 中定义了两个实体，一个是 users，一个是 posts。
在定义完 schema 后，我们需要使用 entitiesReducer 函数来生成对应的 reducer，如下所示：
-- -------------------- ---- -------
------ - --------------- - ---- --------
------ - --------------- - ---- -----------------
----- ------ - -
------ ---
------ --
--
----- ----------- - -----------------
--------- -----------------------
---
------ ------- ------------到目前为止，我们已经成功地创建了一个拥有两个实体的 reducer，而且并没有写一行 reducer 代码！
接下来，我们就可以在组件中使用这个 reducer 了。首先，我们需要定义 actions，redux-entities 提供了一个辅助函数 createAction，用于生成标准的 action，如下所示：
import { createAction } from 'redux-entities';
export const fetchUser = createAction('users/FETCH');createAction 接受一个字符串作为参数，字符串的格式为：实体名称/操作名称。在上面的示例中，我们定义了一个 fetchUser 的 action，它的操作名称为 FETCH，操作的实体名称为 users。
接下来，我们就可以在组件中发起 fetchUser 的 action 了，如下所示：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - --------- - ---- -------------
----- -------- ------- --------- -
------------------- -
-----------------------
-
-------- -
-- ---
-
-
------ ------- ------------- - --------- -------------在 componentDidMout 生命周期中，我们向 store 中发起了一个 fetchUser 的 action，在 reducer 中对应的操作是 users/FETCH。
redux-entities 的辅助函数
redux-entities 提供了一些常用的辅助函数，例如 normalize、denormalize 等，用于数据的转换和处理。
normalize 函数
函数签名：normalize(data, entityName, idAttribute = 'id')
normalize 函数用于将数据转换为标准的 normalized 数据，它接受三个参数：
- data：需要被转换的数据，可以是单个对象或对象数组；
- entityName：目标实体名称；
- idAttribute（可选）：指定 id 的属性名称，默认为 id。
下面是一个简单的示例：
-- -------------------- ---- -------
------ - --------- - ---- -----------------
----- ---- - --
--- --
----- -------
-- -
--- --
----- -----
---
----- -------------- - --------------- ---------
----------------------------输出结果为：
-- -------------------- ---- -------
-
--------- -
------ -
---- -
--- --
----- -------
--
---- -
--- --
----- -----
-
-
--
------- --- --
-denormalize 函数
函数签名：denormalize(data, schema, entities)
denormalize 函数用于将 normalized 数据转换为 denormalized 数据，它接受三个参数：
- data：需要被转换的数据，可以是单个对象或对象数组；
- schema：目标实体的 schema；
- entities：标准的 normalized 数据。
下面是一个简单的示例：
-- -------------------- ---- -------
------ - ----------- - ---- -----------------
----- ------ - -
------ ---
------ --
--
----- -------- - -
------ -
---- -
--- --
----- -------
--
---- -
--- --
----- -----
-
--
------ -
---- -
--- --
------ ----- ------
------- -
--
---- -
--- --
------ ---- ------
------- -
-
-
--
----- ---- - --
--- --
------ ----- ------
------- -
--- --
----- -------
-
-- -
--- --
------ ---- ------
------- -
--- --
----- -----
-
---
----- ---------------- - ----------------- ------- ----------
------------------------------输出结果为：
-- -------------------- ---- -------
--
--- --
------ ----- ------
------- -
--- --
----- -------
-
-- -
--- --
------ ---- ------
------- -
--- --
----- -----
-
--总结
通过本文的介绍，我们了解了如何使用 redux-entities 来简化数据状态管理的代码，以及一些常用的辅助函数。使用 redux-entities 可以让我们更加专注于业务代码的编写，而不必过多地关注状态管理相关的细节。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ce361a36e0bce8c69