在 Redux 中，数组是一种常见的状态数据类型。而在应用程序中，我们经常需要对数组进行添加、修改、删除等操作。本文将介绍如何在 Redux 中更新状态数组。
创建数组状态
在 Redux 中，我们可以使用 combineReducers 函数来合并多个 reducer，每个 reducer 管理应用程序的一部分状态。假设我们的应用程序中需要管理一个 todoList 的状态数组，可以使用以下代码创建一个 todos reducer 并将其合并到根 reducer 中。
-- -------------------- ---- -------
-- --------
----- ------------ - -
----- ---
--
-------- ------------------ - ------------- ------- -
------ ------------- -
---- -----------
------ -
---------
----- --------------- ----------------
--
---- --------------
------ -
---------
----- ---------------------- -- ------- --- ----------------
--
--------
------ ------
-
-
------ ------- --------------- -------------------- ---- ------- -- -------------- ------ - --------------- - ---- -------- ------ ------------ ---- ---------- ----- ----------- - ----------------- ------ ------------- --- ------ ------- ------------
添加新元素
在 Redux 中，通常通过触发一个 action 来更新状态。假设我们希望添加一个 todo，可以创建一个 ADD_TODO action，其中 payload 是一个包含 todo 数据的对象。在 todosReducer 中，我们可以通过使用扩展运算符 ... 和数组的 push 方法添加新元素。
const todo = { id: 1, text: '学习 Redux' };
const action = { type: 'ADD_TODO', payload: todo };
store.dispatch(action);-- -------------------- ---- -------
-------- ------------------ - ------------- ------- -
------ ------------- -
---- -----------
------ -
---------
----- --------------- ----------------
--
-- ---
-
-修改元素
假设我们希望修改一个 todo，可以创建一个 UPDATE_TODO action，其中 payload 是一个包含 todo 数据的对象。在 todosReducer 中，我们可以通过使用 map 方法遍历数组并对指定元素进行修改。
const updatedTodo = { id: 1, text: '学习 React Native' };
const action = { type: 'UPDATE_TODO', payload: updatedTodo };
store.dispatch(action);-- -------------------- ---- -------
-------- ------------------ - ------------- ------- -
------ ------------- -
---- --------------
------ -
---------
----- ------------------- -- -
-- -------- --- ------------------ -
------ ---------------
-
------ -----
---
--
-- ---
-
-删除元素
假设我们希望删除一个 todo，可以创建一个 DELETE_TODO action，其中 payload 是一个包含 todo id 的字符串或数字。在 todosReducer 中，我们可以使用 filter 方法删除指定元素。
const todoId = 1;
const action = { type: 'DELETE_TODO', payload: todoId };
store.dispatch(action);-- -------------------- ---- -------
-------- ------------------ - ------------- ------- -
------ ------------- -
---- --------------
------ -
---------
----- ---------------------- -- ------- --- ----------------
--
-- ---
-
-总结
在 Redux 中，更新状态数组的操作通常需要我们创建一个管理数组状态的 reducer，并创建相应的 action。在 reducer 中，我们可以使用扩展运算符 ... 和数组的 push、map、filter 等方法来进行添加、修改、删除等操作。
本文提供了一些示例代码来说明如何在 Redux 中更新状态数组。如果你正在学习 Redux 或使用 Redux 进行实际开发，这些示例代码将为你提供指导和参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64578b90968c7c53b0a35fbc