在前端开发中，我们经常需要处理嵌套数据，例如树状数据和复杂对象数据。在 Redux 应用中，处理嵌套数据尤为困难，因为 Redux 的设计理念是单一数据源（Single Source of Truth），将所有数据储存在一个 Store 中，这给处理嵌套数据带来了挑战。本文将介绍如何在 Redux 应用中优雅地处理嵌套数据，既保证 Redux 的设计理念，又不降低代码可读性和可维护性。
基本原则
在处理嵌套数据时，应该遵循以下基本原则：
- 不要直接改变原始数据。Redux 应用中的数据是唯一可信的数据源，应该保持不变。
- 将数据拆分成小块。将复杂数据拆分成小块，这样每个组件只需要关注需要的部分数据，可以减少维护和测试的工作量。
处理嵌套数据的方法
使用 selector
使用 selector 是处理嵌套数据时的一种常见方法。Selector 是一种函数，它能接受 State 作为参数，返回一个新的数据结构。Selector 可以将 State 的一部分或全部重新组合成一个新的对象。使用 Redux 中的 createSelector 工具可以更加方便地创建 Selector。例如：
-- -------------------- ---- ------- ------ - -------------- - ---- -------- ----- ------- - ------- ------ -- --------------------- ----- ----------- - --------------- -------- ---- -- ------------------ ----------------- -- ------------------------- ----- - -- - ---------- ------- --------- ----- - - -- - --- - ---- -- ------- ---- ---
在上面的示例代码中，我们定义了一个 getUser Selector，它接受一个 State 和一个 props 参数，返回一个用户对象。我们还定义了一个 getFullName Selector，它接受 getUser 返回的用户对象，返回用户的全名。这样我们可以通过 getFullName 获取用户的全名。
使用 Normalizr
Normalizr 是一个处理嵌套数据的库，它能够将复杂的嵌套数据结构拆分成单独的标准化对象。这样可以方便地管理和使用数据。下面是一个示例代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ------------
----- ------------ - -
--- ------
------ -- ---- ------
------- -
--- ----
----- ------
--
--------- -
-
--- ------
---------- -
--- ----
----- --------
-
-
-
--
----- ---- - --- -----------------------
----- ------- - --- ------------------------- -
---------- ----
---
----- ------- - --- ------------------------- -
------- -----
--------- ---------
---
----- -------------- - ----------------------- ---------
----------------------------
--
-------
-
------- ------
--------- -
------ -
---- - --- ---- ----- ------ --
---- - --- ---- ----- -------- -
--
--------- -
------ - --- ------ ---------- --- -
--
--------- -
------ -
--- ------
------ -- ---- ------
------- ----
--------- -------
-
-
-
-
--在上面的示例代码中，我们首先定义了一个 originalData 对象，它包含嵌套数据。然后我们定义了一个 user Entity 和一个 comment Entity，它们表示用户和评论。最后我们定义了一个 article Entity，它表示一篇文章，包含作者和评论。我们使用 normalize 工具将 originalData 标准化，并将其拆分成独立的标准化对象。这样我们就可以很容易地管理和使用数据。
使用 Immutable.js
Immutable.js 是一个处理不可变数据结构的库。它提供了一系列不可变数据类型和方法，使得数据的修改和访问变得更加可靠。在处理嵌套数据时，Immutable.js 的优势尤为明显。例如，使用 Immutable.js 处理树状数据结构时，只需使用 set 和 merge 方法即可快速创建新的树状数据结构。下面是一个示例代码：
-- -------------------- ---- -------
------ --------- ---- ------------
----- ------------ - ------------------
--- ------
------ -- ---- ------
------- -
--- ----
----- ------
--
--------- -
-
--- ------
---------- -
--- ----
----- --------
-
-
-
---
----- ----------- - ------------------------------- -- ------------ ------ -----
--------------------------------
--
-------
-
--- ------
------ -- ---- ------
------- -
--- ----
----- ------
--
--------- -
-
--- ------
---------- -
--- ----
----- --------
-
-
-
-
--在上面的示例代码中，我们首先定义了一个 originalData 不可变数据结构。然后我们使用 setIn 方法创建了一个新的不可变数据结构 updatedData，它将一个评论的评论者 ID 修改为 3。最后我们将 updatedData 转换为原始 JavaScript 对象，并输出结果。这样我们就可以很容易地创建和更新嵌套数据结构。
总结
在本文中，我们介绍了如何在 Redux 应用中优雅地处理嵌套数据。我们讨论了使用 Selector、Normalizr 和 Immutable.js 处理嵌套数据的方法，并给出了示例代码。无论你选择哪种方法，都要遵循基本原则，避免直接修改原始数据，并将数据拆分成小块。通过这些方法，我们可以更好地管理和使用嵌套数据，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a14dbc48841e9894d9326c