在前端开发中，数据处理是非常重要的一环。redux-normalizr-middleware 是在应用 redux 状态管理库中，将数据进行规范化处理的中间件。这个 npm 包可以帮助开发者更好地实现数据处理和状态管理。
什么是规范化处理？
规范化处理，就是将嵌套的数据结构转换成扁平化的状态。例如，如果一个用户对应多个评论，就可以将用户信息和评论信息分别存储，用一个唯一的 ID 来关联它们。这样做有以下几个好处：
- 可以更好地控制数据，方便统计分析
- 减少了数据冗余，让数据更加清爽
- 状态树更方便地进行查找、增加、修改和删除操作
如何使用 redux-normalizr-middleware？
下面我们就来看一下如何使用 redux-normalizr-middleware 进行规范化处理。
首先，需要安装依赖：
npm install redux-normalizr-middleware normalizr --save
然后，在应用 redux 的 createStore() 函数中，加入 redux-normalizr-middleware：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ - ---------- ------ - ---- ------------
------ ------------------------ ---- -----------------------------
----- ---------- - --- -----------------------
----- ------------- - --- ------------------------- -
----- ----------
---
----- ----------- - -
--------------------------
--------- -
------ ---
--------- --
-
---
-----
--
----- ----- - ------------
---------
-------------------------------
--在这里，我们将一个用户实体 userSchema 和一个评论实体 commentSchema 定义了起来。接着，我们在 createStore() 函数中配置了 redux-normalizr-middleware 的相关参数。其中，entities 是用来存储实体的 ID 和实体本身的映射对象。
注：redux-normalizr-middleware 一般作为 applyMiddleware() 函数的第一个参数传入，因为它需要对 action 进行处理，所以必须放在其他 middleware 前面。
接着，我们就可以在 reducer 中处理 action.payload 数据了，例如：
-- -------------------- ---- -------
------ -
--------------------
----------------------
- ---- -------------------
------ ------- -------- ------------------- - --- ------- -
------ ------------- -
---- --------------------
---- -----------------------
------ -
---------
--------------------------
--
--------
------ ------
-
-其中，action.payload.entities 就是已经通过 normalizr 规范化处理了的实体数据。
实例说明
这里我们通过实例来说明 redux-normalizr-middleware 的使用。
假设我们有以下两个实体：
-- -------------------- ---- -------
-
----------- -
-
----- ----
---------- ------
------- -
----- ------
------- ----
-
--
-
----- ----
---------- ------
------- -
----- ------
------- ----
-
-
-
-我们可以将其规范化成如下形式：
-- -------------------- ---- -------
-
--------- -
----------- -
---- ---
-
--
----------- -
----------- -
---- -
----- ----
---------- ------
------- -----
--
---- -
----- ----
---------- ------
------- -----
-
--
-------- -
------ -
----- ------
------- ----
-
-
-
-这样，我们就将数据规范化处理成了扁平化的状态。
总结
使用 redux-normalizr-middleware，可以更加高效地处理数据，在 redux 状态管理中更加方便地进行操作。需要注意的是，在使用该中间件进行实体规范化处理的时候，要特别注意实体之间的关系。希望读者在 redux-normalizr-middleware 中受益！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8bf8