在前端开发中，我们经常需要管理复杂的数据结构。Redux 是一种流行的状态管理库，但它的默认数据结构并不适合所有情况。在某些情况下，我们需要对数据进行范式化，以便更好地管理和组织数据。Normalizr 是一种数据范式化库，可以帮助我们实现这一目标。本文将介绍如何在 Redux 中使用 Normalizr 实现 State 的范式化。
什么是范式化
范式化是一种将数据结构转换为一组彼此独立的表的过程。这种转换使得数据更易于管理和查询。在 Redux 中，我们通常使用嵌套对象来表示状态。例如，我们可能有一个包含所有用户的对象，每个用户都是一个对象，其中包含有关该用户的信息。但是，这种嵌套结构会导致一些问题。例如，当我们需要更新一个用户的信息时，我们需要遍历整个用户列表，找到该用户的对象，并更新它。这种操作可能会变得非常缓慢，并且代码会变得难以维护。范式化可以帮助我们避免这些问题，将数据结构转换为一组独立的表，每个表都包含一组相关的数据。
Normalizr 的基本概念
Normalizr 是一个用于范式化数据的库。它基于以下几个基本概念：
- Entity：实体是指一组具有唯一标识符的相关数据。例如，在一个电影应用程序中，每个电影可以被视为一个实体，每个实体都有一个唯一的 ID。
- Schema：模式是指描述实体及其关系的对象。例如，一个电影应用程序中，电影可以与演员、导演和评论相关联。我们可以使用模式来描述这些关系。
- Normalization：范式化是指将嵌套的数据结构转换为一组独立的表的过程。在 Normalizr 中，我们使用模式来定义如何将嵌套的数据结构范式化为表。
使用 Normalizr 实现 State 的范式化
在 Redux 中使用 Normalizr 实现 State 的范式化需要以下步骤：
1. 定义 Schema
首先，我们需要定义模式来描述数据的结构和关系。在这个例子中，我们将使用一个简单的博客应用程序作为示例。我们假设每篇博客都有一个唯一的 ID，并且每篇博客都有一个作者。我们还假设每个作者都有一个唯一的 ID。我们可以使用以下模式来描述这些实体：
------ - ------ - ---- ------------ ----- ------------ - --- ------------------------- ----- ---------- - --- ---------------------- - ------- ------------- ---
在这个模式中，我们定义了两个实体：作者和博客。我们使用 new schema.Entity 函数来定义每个实体。第一个参数是实体的名称，第二个参数是一个对象，其中包含实体的属性及其类型。在这个例子中，我们定义了一个 author 属性，它引用了作者实体。这意味着每篇博客都将包含一个 author 属性，该属性将引用一个作者实体。
2. 范式化数据
一旦我们定义了模式，我们就可以使用 Normalizr 将数据范式化为表。我们可以使用 normalize 函数来执行范式化。例如，假设我们有以下博客列表：
----- ----- - -
-
--- --
------ ----- ---
------- -
--- --
----- ------- ---
--
--
-
--- --
------ ----- ---
------- -
--- --
----- ------- ---
--
--
--我们可以使用以下代码将这个列表范式化为表：
------ - --------- - ---- ------------ ----- -------------- - ---------------- --------------
在这个例子中，我们使用 normalize 函数将博客列表范式化为表。第一个参数是要范式化的数据，第二个参数是要使用的模式。在这个例子中，我们使用 blogSchema 模式来范式化博客列表。normalize 函数的返回值是一个对象，其中包含范式化后的数据和实体的 ID 列表。
3. 存储范式化数据
一旦我们将数据范式化为表，我们需要将它们存储在 Redux 的状态中。我们可以将每个表存储为一个单独的对象，并在根状态对象中使用它们的名称作为键。例如，假设我们使用以下代码将范式化后的数据存储到 Redux 状态中：
----- ------------ - -
------ ---
-------- ---
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ----------------------
------ -
---------
------ ------------------------------
-------- --------------------------------
--
--------
------ ------
-
-在这个例子中，我们将范式化后的数据存储在 Redux 状态对象的 blogs 和 authors 属性中。在 FETCH_BLOGS_SUCCESS 动作中，我们将实体存储在状态中。这意味着我们可以轻松地查询和更新这些实体，而无需遍历整个列表。
4. 获取范式化数据
一旦我们将数据存储在 Redux 状态中，我们可以轻松地查询和更新这些实体。例如，我们可以使用以下代码查询博客列表：
-------- ------------------ - ------ --------------------------- -
在这个例子中，我们使用 Object.values 函数获取状态中所有博客实体的值。这将返回一个博客实体的数组，每个博客实体都是一个独立的对象。我们可以使用类似的方法查询和更新其他实体。
总结
Redux 是一种流行的状态管理库，但它的默认数据结构并不适合所有情况。在某些情况下，我们需要对数据进行范式化，以便更好地管理和组织数据。Normalizr 是一种数据范式化库，可以帮助我们实现这一目标。在 Redux 中使用 Normalizr 实现 State 的范式化需要以下步骤：定义模式、范式化数据、存储范式化数据和获取范式化数据。通过使用 Normalizr，我们可以轻松地查询和更新实体，而无需遍历整个列表。这可以提高性能并使代码更易于维护。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c6ebf0add4f0e0ff11f73a