Redux 是前端状态管理的一种极其流行的框架，在 React 生态中，Redux 几乎是不可或缺的一部分。当我们开始使用 Redux 管理应用的状态时，我们会发现，对于深嵌套的数据来说，Redux 的处理方式似乎有些复杂。在这篇文章中，我们将介绍 Redux 如何处理深层嵌套数据，并提供一些优雅的方法，使我们能够更轻松地管理和更新嵌套数据。
什么是深嵌套数据
深嵌套数据指的是嵌套层级较多的数据结构。例如，我们有一个应用程序管理学生成绩，在每个学期有多门课程，每门课程有多个学生。下面是一个嵌套的数据结构示例：
-- -------------------- ---- -------
-
---------- -
-
--- --
----- --------- ---
-------- -
-
--- --
----- -------
--------- -
-
--- --
----- --------
------ --
--
-
--- --
----- ------
------ --
-
-
--
-
--- --
----- ----------
--------- -
-
--- --
----- --------
------ --
--
-
--- --
----- ------
------ --
-
-
-
-
--
-
--- --
----- --------- ---
-------- -
-
--- --
----- -------
--------- -
-
--- --
----- --------
------ --
--
-
--- --
----- ------
------ --
-
-
--
-
--- --
----- ----------
--------- -
-
--- --
----- --------
------ --
--
-
--- --
----- ------
------ --
-
-
-
-
-
-
-从上面的示例中可以看出，学期包含多门课程，每门课程包含多个学生。这种嵌套的数据结构常常会让我们的代码变得复杂，因此需要一些优雅的方式来管理和处理它。
Redux 中如何处理深嵌套数据
Redux 的工作原理是以一个全局状态树为基础的。这个状态树可以包含不同的嵌套等级。为了处理嵌套的数据结构，Redux 提供了一种称为“范式化”的解决方案。
范式化的核心思想是将嵌套的数据结构拆分成更小的单元，并以一种更扁平的方式存储。在上面的示例中，我们可以拆分成以下三个单元：
- 学期
- 课程
- 学生
我们可以使用 ID 来表示每个单元，并将每个单元存储在单独的对象中。这将使我们能够更轻松地管理和更新复杂的嵌套数据。
下面是一个以 “范式化” 方式存储上述嵌套结构的示例：
-- -------------------- ---- -------
-
-------------- -
-- -
--- --
----- --------- ---
-------- --- --
--
-- -
--- --
----- --------- ---
-------- --- --
-
--
------------ -
-- -
--- --
----- -------
--------- --- ---
--------- -
--
-- -
--- --
----- ----------
--------- --- ---
--------- -
--
-- -
--- --
----- -------
--------- --- ---
--------- -
--
-- -
--- --
----- ----------
--------- --- ---
--------- -
-
--
------------- -
-- -
--- --
----- --------
------ ---
------- -
--
-- -
--- --
----- ------
------ ---
------- -
--
-- -
--- --
----- --------
------ ---
------- -
--
-- -
--- --
----- ------
------ ---
------- -
--
-- -
--- --
----- --------
------ ---
------- -
--
-- -
--- --
----- ------
------ ---
------- -
--
-- -
--- --
----- --------
------ ---
------- -
--
-- -
--- --
----- ------
------ ---
------- -
-
-
-从上面的示例中我们可以看到，学期、课程和学生都被存储在单独的对象中，使用 ID 表示它们之间的关系。通过这种方式，我们能够更轻松地更新嵌套数据，而不必担心原来嵌套的结构。
如何在 Redux 中处理深嵌套数据的更新
在 Redux 中，我们可以使用类似于 React 中的不可变数据结构，即将更新后的值返回一个新的对象，而不是在原来的对象上直接修改。这样能够确保我们不会改变原始的对象，从而避免一些潜在的问题。
如果我们要更新嵌套的数据结构，可以使用以下方式：
-- -------------------- ---- -------
----- -------- - --
----- --------- - --
----- -------------- - ---- ------
------ -
---------
------------- -
----------------------
------------ -
---------------------------------
----- ---------------
------- --------
-
-
--在上面的示例中，我们更新了 ID 为 1 的学生的名称和所属课程。由于我们使用了可扩展的属性，因此我们能够在不修改原始学生对象的情况下更新它的属性。同时，我们也不必担心嵌套结构的问题，Redux 将自动处理这些内容。
好处
通过“范式化”的方式，我们可以更轻松地管理和更新复杂的嵌套数据。这使得我们在具有大量数据或多个嵌套结构的应用程序中工作更加轻松。借助可扩展的属性和不可变数据结构的方式，我们能够快速地处理更新，并避免潜在的问题。同时，我们也能够更快地进行调试和排除错误。
结论
Redux 是管理前端状态的一种流行框架，对于嵌套的数据结构，Redux 提供了一种称为“范式化”的解决方案。通过“范式化”，我们能够将嵌套的数据结构拆分成更小的单元，并以一种更扁平的方式存储。通过可扩展的属性和不可变数据结构的方式，我们也能更轻松地更新嵌套数据，避免潜在的问题，并更快地进行调试和排除错误。在未来的应用程序开发中，这些技巧将非常有用，并能够更新复杂嵌套数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672c0344ddd3a70eb6d419bf