Redux 是一个流行的 JavaScript 应用程序状态管理工具。每个 Redux 应用程序都有一个状态树，其中包含了所有的状态数据。在许多情况下，我们需要对这些数据进行分组和合并来更好地组织应用程序的状态。本文将介绍 Redux 中处理分组及合并数据的方法，并提供示例代码。
分组数据
Redux 中的分组数据是指将一些相关的数据组合在一起，形成一个对象，并在 Redux 状态树中以一个键值对的形式存储。可以将这个对象看做状态树的一个分支。
为了更好地理解如何在 Redux 中处理分组数据，让我们来看一个示例。假设我们正在构建一个在线商店应用程序，其中有一个购物车功能。我们需要将购物车中的商品按照店铺进行分组。
首先，我们需要定义一个购物车状态的初始值，其中包括一个空的商品列表和一个空的分组对象：
const initialState = {
items: [],
groups: {}
};接下来，我们可以定义一个 reducer 函数来处理购物车中的数据。该函数将处理两种不同的 action 类型：添加商品和添加分组。当添加商品时，我们将该商品推入到商品列表中。当添加分组时，我们将在分组对象中创建一个新的键，该键将指向一个空的数组：
-- -------------------- ---- -------
-------- ------------------------- - ------------- ------- -
------ ------------- -
---- -----------
------ -
---------
------ ---------------- ---------------
--
---- ------------
------ -
---------
------- -
----------------
----------------- --
-
--
--------
------ ------
-
-现在，我们可以添加一个名为“超市”的分组，并将商品添加到该分组中。我们需要将购物车的状态树传递给一个组件，并在该组件中添加商品和分组的按钮：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------------ ------- --------------- -
------------------ - -- -- -
----- ---- - - ----- ----- ------ --- --------- - --
--------------------- ----- ----------- -------- ---- ---
--
------------------- - -- -- -
----- ----- - -----
--------------------- ----- ------------ -------- ----- ---
--
-------- -
------ -
-----
------- -----------------------------------------------
------- ------------------------------------------------
------
--
-
-
------ ------- ------------------------当我们单击添加分组按钮时，Redux 状态树将被更新。我们可以在组件中添加一个代码片段来查看状态树的变化：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------------ ------- --------------- -
------------------- - -- -- -
----- ----- - -----
--------------------- ----- ------------ -------- ----- ---
----------------------------- -------------------
--
-------- -
------ -
-----
------- ------------------------------------------------
------
--
-
-
----- --------------- - ----- -- --
------ ------------
------- ------------
---
------ ------- ---------------------------------------当我们单击添加分组按钮时，控制台将会输出购物车的状态树：
// 添加分组前
items: []
groups: {}
// 添加分组后
items: []
groups: { 超市: [] }合并数据
Redux 中的合并数据是指将两个对象合并成一个对象，并在 Redux 状态树中以一个键值对的形式存储。可以将合并的对象看做状态树的一个分支。
让我们以购物车的例子来说明如何在 Redux 中合并数据。假设我们正在购买一些物品，其中有两家商店，分别是“超市”和“水果店”。我们需要将这两家商店的购物车数据合并到一个对象中。
首先，我们需要定义两个初始状态，每个状态都包括一个空的商品列表和一个空的分组对象：
-- -------------------- ---- ------- ----- ---------------- - - ------ --- ------- -- -- ----- --------------- - - ------ --- ------- -- --
接下来，我们可以定义一个 reducer 函数来处理不同商店购物车的数据。该函数将处理两个不同的 action 类型：添加商品和修改购物车状态。当添加商品时，我们将该商品推入到商品列表中。当修改购物车状态时，我们将两个购物车状态合并并返回合并后的购物车状态：
-- -------------------- ---- -------
-------- ------------------------- - --- ------- -
------ ------------- -
---- -----------
------ -
---------
------ ---------------- ---------------
--
---- --------------
----- -------- - - -------- --
----------------------------------------- -- -
-- ---------------- --- ---------- -
--------------- - ----------------------
- ---- -
--------------- - -
-------------------
------ -
-------------------------
------------------------------
-
--
-
---
------ ---------
--------
------ ------
-
-现在，我们可以将购物车状态树传递给一个组件，该组件将添加商品到购物车中。我们还需要添加一个修改购物车状态的按钮，以将两个购物车状态合并：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------------ ------- --------------- -
------------------ - -- -- -
----- ---- - - ----- ----- ------ --- --------- - --
---------------------
----- -----------
-------- -----
----- - ------ ---- -
---
--
------------------- - -- -- -
----- ---- - - ----- ----- ------ --- --------- - --
----- --------- - - ------------------- - ------ ------- ------- -- - --
--------------------- ----- -------------- -------- --------- ---
--
-------- -
------ -
-----
------- -----------------------------------------------
------- ---------------------------------------------------
------
--
-
-
----- --------------- - ----- -- --
------ ------
------ -----------
---
------ ------- ---------------------------------------当我们单击修改购物车状态按钮时，Redux 状态树将被更新。我们可以在组件中添加一个代码片段来查看状态树的变化：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------------ ------- --------------- -
------------------- - -- -- -
----- ---- - - ----- ----- ------ --- --------- - --
----- --------- - - ------------------- - ------ ------- ------- -- - --
--------------------- ----- -------------- -------- --------- ---
------------------------------
--
-------- -
------ -
-----
------- ---------------------------------------------------
------
--
-
-
----- --------------- - ----- -- --
------ ------
------ -----------
---
------ ------- ---------------------------------------当我们单击修改购物车状态按钮时，控制台将会输出购物车的状态树：
-- -------------------- ---- -------
-- --------
-
--- -
------ ---
------- --
--
---- -
------ ---
------- --
-
-
-- --------
-
--- -
------ ---
------- --
--
---- -
------ -
-
----- -----
------ ---
--------- -
-
--
------- --
-
-结论
在 Redux 中处理分组及合并数据是一项非常重要的任务，它能够帮助我们更好地组织应用程序的状态。本文介绍了 Redux 中处理分组及合并数据的方法，并提供了示例代码。我们希望这篇文章能够帮助你更好地理解如何在 Redux 中处理分组及合并数据，从而提高你的代码水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6713733cad1e889fe20d0b62