在 Redux 应用程序中，数组类型的数据常常出现。但是，处理数组类型的数据并不像处理简单的值那样容易，需要我们思考好应该如何对数组进行处理。本文将探讨如何在 Redux 中处理数组类型的数据。
数组类型的 state
Redux 的 state 可以是任何类型的数据，包括数组。例如，一个存储 todo list 的应用程序的 state 可以是以下这样的数组类型：
----- ------------ - - - --- -- -------- --- ------- ---------- ----- -- - --- -- -------- --- ------- ---------- ----- -- -
上面的代码是一个初始状态，其中包含着两个 todo 项。
处理数组类型数据的 action
针对数组类型的 state，我们通常需要定义多个 action 来处理数组元素的添加、删除和修改等操作。
添加元素
添加一个新的 todo 项，通常需要定义一个 ADD_TODO action：
----- -------- - ----------
----- ------- - ------- -- --
----- ---------
-------- -
--- --- -----------------
--------
---------- ------
--
--上面的代码中，addTodo 函数接收一个 content 参数，然后返回一个包括 id、content 以及 completed 的 todo 对象。在 Redux 中，通过使用 dispatch 函数来触发这个 action：
-------------------- --------
删除元素
删除一个 todo 项，需要定义一个 REMOVE_TODO action：
----- ----------- - -------------
----- ---------- - -- -- --
----- ------------
-------- -
---
--
--上面的代码中，removeTodo 函数接收一个 id 参数，然后返回一个包括 id 的对象。以下是如何使用 dispatch 函数来调用 removeTodo action：
-----------------------
修改元素
修改一个 todo 项，需要定义一个 TOGGLE_TODO action：
----- ----------- - -------------
----- ---------- - -- -- --
----- ------------
-------- -
---
--
--上面的代码中，toggleTodo 函数接收一个 id 参数，然后返回一个包括 id 的对象。以下是如何使用 dispatch 函数来调用 toggleTodo action：
-----------------------
处理数组类型数据的 reducer
在 Redux 中，reducer 负责处理 action，并产生新的 state。由于 state 是数组类型的，我们需要用 reducer 来处理数组元素的增加、删除和修改操作。下面是一个处理 todo 清单的 reducer：
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------
------ ---------- ---------------
---- ------------
------ ----------------- -- ------- --- ------------------
---- ------------
------ -------------- --
------- --- -----------------
- - -------- ---------- --------------- -
- ----
-
--------
------ -----
-
-上面的代码中，reducer 接收 state 和 action 参数，并根据 action 的类型来修改 state。我们使用 switch 语句来处理每个 action，代码比较清晰。注意，我们在每个 case 下都会返回一个全新的数组，这样每次修改 state 都会产生一个全新的数组。这种做法可以帮助 Redux 和 React 进行性能优化。
总结
在 Redux 应用程序中，数组类型的数据可以通过定义相关的 action 和 reducer 来处理。我们需要根据具体的应用场景来设计相应的 action 和 reducer。当然，本文只是一个基础的介绍，如果你想要深入了解 Redux 处理数组类型数据，建议阅读官方文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6455ec49968c7c53b0943778