Redux 是一种状态管理库，旨在使 Web 应用程序的状态管理更加可控和可维护。redux-normalizr 是一个基于 Normalizr 的 Redux 数据库规范化器，用于简化挂钩 Redux 应用程序状态的处理器的操作。本文将为您介绍操作 redux-normalizr 的详细指南，协助您实现更轻松，可读性更高的 Redux 应用程序。
安装
使用 npm 安装：
npm install redux-normalizr
然后使用 import 引入：
import normalize from 'redux-normalizr'
如何使用 redux-normalizr
redux-normalizr 使基于 Normalizr 的 Redux 数据规范化器变得容易，它支持三个函数：
- normalize
- denormalize
- schema
本文将依次介绍这些函数的使用。
normalize()
normalize() 函数用于规范化嵌套的对象和数组，使它们更容易用于 Redux 状态管理。
例如，您可能有一个包含客户端和订单的数据：
-- -------------------- ---- -------
-
-------- -
- --- -- ----- ----- ---- --
- --- -- ----- ----- ---- -
--
------- -
- --- -- --------- -- ----- ------------ --
- --- -- --------- -- ----- ------------ -
-
-您可以使用 normalize() 函数将此数据规范化，将相关实体分组并创建一个新的“entyities”对象。此对象包含每个对象的 id，并将每个实体映射到该实体的 ID。
const { entities, result } = normalize(data, schema);在上面的示例中，entities 对象看起来像这样：
-- -------------------- ---- -------
-
-------- -
-- -
--- --
----- ----- ----
--
-- -
--- --
----- ----- ----
-
--
------- -
-- -
--- --
--------- --
----- ------------
--
-- -
--- --
--------- --
----- ------------
-
-
-这将使您可以轻松查找所有客户端或订单。例如，要查找第一个客户端的所有订单，您可以使用以下代码：
const orders = entities.orders; const clientId = entities.clients[1].id; const clientOrders = Object.keys(orders) .filter(orderId => orders[orderId].clientId === clientId) .map(orderId => orders[orderId]);
denormalize()
denormalize() 函数用于将规范化的对象重新映射到数据结构。
例如，如果您拥有上述客户端和订单的 entities 对象和一个 result 数组：
-- -------------------- ---- -------
------- --- --
--------- -
-------- -
-- -
--- --
----- ----- ----
--
-- -
--- --
----- ----- ----
-
--
------- -
-- -
--- --
--------- --
----- ------------
--
-- -
--- --
--------- --
----- ------------
-
-
-您可以使用 denormalize() 函数轻松地重新组合数据，如下所示：
const data = denormalize(result, schema, entities);
schema()
每个对象都需要标识属性，以区分不同对象。redux-normalizr 使用 schema 为每个对象定义一个“严格”结构。下面是一个客户端架构的例子：
-- -------------------- ---- ------- ------ - ------ - ---- ------------------ ----- ------------ - --- ------------------------ --- - ------------ ---- --- ----- ------ - - -------- - ------------ - -- ------ ------- -------
此模式定义一个客户端模式('clients')，该模式由一个简单的客户端模式提供。对于每个实体，可以通过定义一个谷物来自定义其行为。在这种情况下，我们只需指定客户端对象的 idAttribute 属性即可。
例子
现在您已经了解了如何使用 redux-normalizr，我们来看一个完整的示例。在此示例中，我们使用 redux-normalizr，Asynchronous libraries（thunk）和 React 来构建一个简单的带有后端的 book club 应用程序。
首先，我们需要从我们的 API 获取俱乐部和书籍数据。我们将使用 thunk 来调用 API 并将数据规范化：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ------------------
------ --- ---- ---------
------ - ------------- ------------ - ---- -------------
------ ----- ---------- - -- -- -
------ ----- ---------- -- -
--- -
----- -------- - ----- ------------------
----- ---- - ------------------------ - ---------- ---
-----------------------------
- ----- ------- -
-------------------
-
-
--
------ ----- ---------- - -- -- -
------ ----- ---------- -- -
--- -
----- -------- - ----- ------------------
----- ---- - ------------------------ - ---------- ---
-----------------------------
- ----- ------- -
-------------------
-
-
--
----- ---------- - --- ---------------------- --- - ------------ ----- ---
----- ---------- - --- ---------------------- --- - ------------ ----- ---上面的代码使用异步 Aciton Creator（thunk）来调用 API 并将数据规范化。
然后，我们需要在 reducers.js 中更新两个 reducer，以便处理由 fetchClubs 和 fetchBooks 发送到 redux store 的数据：
-- -------------------- ---- -------
------ - --------------- - ---- --------
------ - -------------- ------------- - ---- ------------
------ - ---------- ------ - ---- ------------------
----- ------------ - -
----- ---
------- --
--
----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
---- --------------
----- - --------- ------ - - ---------------
------ -
---------
----- -------------- -- ---
------- ------
--
--------
------ ------
-
--
----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
---- --------------
----- - --------- ------ - - ---------------
------ -
---------
----- -------------- -- ---
------- ------
--
--------
------ ------
-
--
------ ------- -----------------
------ -------------
------ ------------
---这里的 reducer 将数据直接存储到 Redux store 中，以便稍后使用。
假设我们有一个 Book 部件，此部件包含在库中提供的所有书籍元素的特定视图。在此组件中，我们可以使用 selectBooks 函数来选择我们所需的书籍：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - -------------- - ---- ----------------
----- ----------- - ---------------
----- -- -----------------
----- -- -------------------
------ ------- -- ------------- -- ---------
--
----- ---- - -- ----- -- -- -
------ -
-----
------ -- -------------- -- -
---- ---------------------------------
---
------
--
--
----- --------------- - ----- -- --
------ ------------------
---
------ ------- -------------------------------我们使用 createSelector 函数从 Redux store 中选择所有书籍，然后使用 react-redux 中的 connect 函数将选择的书籍作为 props 传递给组件。
作者通过介绍 redux-normalizr 的使用方法，结合 React 和 redux，构建了一个简单的带有后端的 book club 应用程序，来帮助我们更好的管理数据。当您编写 Redux 应用程序时，从环境细节中抽象出数据很重要，而 redux-normalizr 帮助简化和加速这一过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8bf7
