如何使用 normalizr 向 Redux Store 添加/删除数据

Redux 是一个流行的 JavaScript 应用程序状态管理库,而 Normalizr 又是 Redux 生态系统中广泛使用的工具,它可以帮助你规范化嵌套的 JSON 数据对象。在这篇文章中,我们将学习如何使用 Normalizr 来操作 Redux Store 中的数据。

什么是 Normalizr?

Normalizr 是一个可以将复杂的嵌套 JSON 对象规范化为扁平的实体(entities)结构的库。这个库提供了一种方便的方式来定义数据模型,并且可以自动将嵌套的数据对象转换为扁平的实体结构。例如:

-
  --- --
  ----- -------
  -------- -
    - --- -- ----- ------- --
    - --- -- ----- ----- -
  -
-

可以被规范化为下面这个对象:

-
  --------- -
    ------ -
      ---- - --- -- ----- ------- -------- --- -- --
      ---- - --- -- ----- ------- --
      ---- - --- -- ----- ----- -
    -
  --
  ------- -
-

在这个扁平化的实体结构中,每个实体都有一个唯一的标识符,并且其他实体可以通过引用这些标识符来相互关联。这种扁平化的结构可以方便地在 Redux Store 中使用。

使用 Normalizr 创建 Redux Store

首先,我们将使用 Normalizr 来创建一个简单的数据模型,并且使用它来初始化我们的 Redux Store。我们的数据模型将代表一个帖子(Post),每个帖子都有一个唯一的 ID、标题和正文。我们还将为每个帖子添加一个标签(Tag)列表,每个标签也有一个唯一的 ID 和名称。下面是我们的数据模型定义:

------ - ------ - ---- ------------

----- --- - --- ----------------------
----- ---- - --- ---------------------- -
  ----- -----
---

------ ------- - ----- --- --

在上面的代码中,我们创建了两个实体模式:posttagpost 实体包括一个名为 tags 的属性,它的值是一个标签数组。每个标签都是 tag 实体的一个实例。

现在,我们需要使用这些实体模式来初始化我们的 Redux Store。我们将使用 normalizr 库中的 normalize 函数来规范化数据并将其存储在 Redux Store 中。下面是初始化 Redux Store 的代码:

------ - ----------- - ---- --------
------ - --------- - ---- ------------
------ ------ ---- ----------- -- ---------

----- ------------ - -
  --------- ---
  ------- --
--

----- ------- - ------ - ------------- ------- -- -
  ------ ------------- -
    ---- -----------
      ------ -
        ---------
        --------- -
          ------------------
          --------------------------
        --
        ------- ----------------- ----------------------
      --
    ---- --------------
      ------ -
        ---------
        --------- ---------------------------
          ----------- -- --- --- --------------------------
          --------------------- ---- -- -
            ---------------- - --------------------
            ------ ------------
          -- ----
        ------- ---------------------- -- -- --- ---------------
      --
    --------
      ------ ------
  -
--

----- ----- - ---------------------

-- --- ----- ---
----- ---- - -
  ------ -
    -
      --- --
      ------ ------ ------
      ----- ------ ----- ----- --- ---------
      ----- -- --- -- ----- ------ -- - --- -- ----- ------ --
    --
    -
      --- --
      ------ ------- ------
      ----- --- ---- -- ----- -----------

- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------