在 Redux 中，"Action Creators" 和 "Reducers" 是两个非常重要的概念。本文将会详细介绍它们的含义、使用场景以及如何正确地使用。
什么是 "Action Creators"
在 Redux 中，"Action Creators" 用来创建 Action。Action 是一个简单的对象，它有一个 "type" 字段和一些 "payload" 数据。"Action Creators" 用来生成这些 Action 对象。
下面是一个 "Action Creators" 的示例：
const ADD_TODO = "ADD_TODO";
function addTodoAction(todo) {
return {
type: ADD_TODO,
payload: todo,
};
}上面的代码中，我们定义了一个 "ADD_TODO" 的常量作为 Action 的类型，然后定义了一个 "addTodoAction" 的函数来生成一个包含 "ADD_TODO" 类型和数据的 Action 对象。
什么是 "Reducers"
在 Redux 中，"Reducers" 用来更新 State。Reducer 是一个纯函数，它接收当前的 State 和一个 Action 作为参数，并返回一个新的 State。Reducer 不能改变原有的 State，它应该始终返回一个新的 State 对象。
下面是一个简单的 "Reducers" 的示例：
-- -------------------- ---- -------
----- -------- - -----------
-------- ------------------ - --- ------- -
------ ------------- -
---- ---------
------ ---------- ----------------
--------
------ ------
-
-上面的代码中，我们定义了一个初始的 State，即一个空数组。然后定义了一个 "todosReducer" 的函数来处理 Action。当收到一个 "ADD_TODO" 的 Action 时，Reducer 会将新的 todo 添加到原来的 State 中并返回一个新的 State 对象。
使用示例
下面是一个简单的使用示例：
-- -------------------- ---- -------
------ - ----------- - ---- --------
-- -- ------ -----
----- -------- - -----------
-- -- ------ --------
-------- ------------------- -
------ -
----- ---------
-------- -----
--
-
-- -- --------
-------- ------------------ - --- ------- -
------ ------------- -
---- ---------
------ ---------- ----------------
--------
------ ------
-
-
-- -- -----
----- ----- - --------------------------
-- -- ------
--------------------------------- --------
-- -- -----
----- ----- - -----------------
------------------- -- ----- ------上面的代码中，我们首先使用 Redux 的 "createStore" 函数创建了一个 Store 对象，并将 "todosReducer" 函数作为参数传入。然后我们使用 "addTodoAction" 函数创建了一个包含 "ADD_TODO" 类型的 Action 对象并发起了一个 Action。
最后，我们使用 "store.getState()" 函数获取当前的 State，并将其打印出来。可以看到，我们成功地将 "Buy Milk" 添加到了 State 中。
总结
"Action Creators" 和 "Reducers" 是 Redux 中两个非常重要的概念。使用 "Action Creators" 可以生成 Action 对象，使用 "Reducers" 可以更新 State。在实际开发中，使用 Redux 可以帮助我们更好地管理应用的 State，提高开发效率和应用质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6593b4c7eb4cecbf2d85acb9