简介
redux-normalizr3-middleware 是一个 Redux 中间件，它的主要作用是将 Action 中的数据进行归一化，使数据变得更有组织性和可读性。在实际应用中，这个中间件在处理数据过程中可以提高代码的可维护性，降低代码的冗余度。本文将对 redux-normalizr3-middleware 的使用进行详细讲解。
安装
redux-normalizr3-middleware 可以通过 npm 进行安装，在项目目录下执行以下命令：
npm install redux-normalizr3-middleware --save
安装完成后，我们需要在中间件链中引入它：
import { createStore, applyMiddleware } from 'redux'
import normalizrMiddleware from 'redux-normalizr3-middleware'
import rootReducer from './reducers'
const store = createStore(
rootReducer,
applyMiddleware(normalizrMiddleware)
)使用
redux-normalizr3-middleware 是一个中间件，我们需要了解如何使用 normalizr 这个工具。
normalizr 是什么
normalizr 可以将任意的复杂嵌套级别的 JSON 数据转换成一个扁平化的结构，也就是说它会将嵌套的对象打扁成一个个独立的实体。它提供了一组强大的规则来对 JSON 数据进行解析和转换。可以访问 normalizr 来查看其文档。
定义 normalizr 的 Schema
在使用 normalizr 时，我们需要定义一个 Schema 来描述需要被转换的数据。Schema 定义包含以下几个部分：
key(String): 代表当前Schema对象在要被规范化的数据中的字段名。idAttribute(String): 可选值，代表当前Schema对象中的哪个字段作为该对象的唯一 ID，为字符串。hasOne(Object 或 Array): 可选值，一个对象或者对象数组，用于描述和当前Schema相互关联的其他Schema类型，即表明当前Schema对象拥有一个或多个关联的Schema，并存在于关联Schema中。hasMany(Object 或 Array): 可选值，一个对象或者对象数组，用于描述和当前Schema相互关联的其他Schema类型，即表明当前Schema对象拥有多个关联的Schema，并存在于关联Schema中。
定义完一个 Schema 后，我们可以通过传入 Schema 到 normalize 函数中，将 JSON 数据转化为规范化后的数据。
-- -------------------- ---- ------- ------ - ------ - ---- ----------- -- -- ------ - ------ ----- ------------ - --- ----------------------- -- -- ------- - ------ ----- ------------- - --- ------------------------ - ------- ------------ -- ----- -------------- - ----------------------- --------------
在 Redux 中使用
通过上述的内容，我们可以得到以下 Redux Action：
-- -------------------- ---- -------
-
----- -------------
-------- -
-
--- --
------ --------
------- - --- -- ----- --- -- --
--------- -- --- -- -------- --- -- -- - --- -- -------- --- -- --
--
-
--- --
------ --------
------- - --- -- ----- --- -- --
--------- -- --- -- -------- --- -- -- - --- -- -------- --- -- --
-
-
-为了让数据更具可读性和可维护性，我们需要将这些数据进行规范化，这就需要借助于 normalizr 和 redux-normalizr3-middleware 的帮助。
-- -------------------- ---- -------
------ - ------ - ---- -----------
------ ------- ---- ------------
------ - ------------ - ---- -------------
-- -- ------ - ------
----- ------------ - --- -----------------------
-- -- ------- - ------
----- ------------- - --- ------------------------
-- -- ------- - ------
----- ------------- - --- ------------------------ -
------- -------------
--------- ---------------
--
------ -------- ------------- -
------ ------------------ -
------------------------
---------- ---- -- -
----------
----- -------------
-------- --------------------------------
--
--
-
-
----- ------------------- - ------------------------------------------------
---------- -------- ------ -- ----- -- -------------
------------ -------- ------ -- ------------------------
-------- -
--------- ---------------
--
------- -----------------
----- --------------
--
------ ------- -------------------完成上述的代码之后，我们就可以在组件中通过 Redux 的 connect 函数将数据建立连接，然后通过以下方式获取分类后的数据：
import { connect } from 'react-redux'
const mapStateToProps = state => ({
articles: state.normalizr.articles
})
export default connect(mapStateToProps)(ArticleList)至此 redux-normalizr3-middleware 的使用流程已经介绍完毕，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005555f81e8991b448d28fe