在前端开发中，数据源控制是一个重要的问题。Redux 是一个流行的数据源控制库，它提供了一种简单的方式来管理应用程序的状态。在 Redux 中，Action 和 Reducer 是两个核心概念，它们共同实现了数据源的控制。
Action
Action 是一个普通的 JavaScript 对象，它描述了一个事件的发生。在 Redux 中，Action 用于描述发生在应用程序中的事件，例如用户点击按钮、网络请求响应等。Action 对象通常包含一个 type 属性和一些其他属性，type 属性用于描述事件的类型，其他属性用于描述事件的具体内容。
下面是一个简单的 Action 示例：
{
type: 'ADD_TODO',
payload: {
id: 1,
text: 'Learn Redux',
completed: false
}
}在上面的示例中，type 属性的值为 'ADD_TODO'，它表示一个添加 Todo 项的事件。payload 属性包含了具体的 Todo 项内容。
Reducer
Reducer 是一个纯函数，它根据 Action 对象返回一个新的状态。在 Redux 中，Reducer 用于处理应用程序的状态变化。当一个 Action 发生时，Reducer 会根据 Action 的 type 属性来选择相应的处理逻辑，然后返回一个新的状态。
下面是一个简单的 Reducer 示例：
-- -------------------- ---- -------
-------- ----------- - --- ------- -
------ ------------- -
---- -----------
------ -
---------
--------------
-
---- --------------
------ -------------- --
------- --- -----------------
- - -------- ---------- --------------- -
- ----
-
--------
------ -----
-
-在上面的示例中，todos 函数是一个 Reducer 函数。它接收两个参数：state 和 action。state 是当前的状态，action 是一个 Action 对象。根据 Action 的 type 属性，todos 函数选择相应的处理逻辑，并返回一个新的状态。
实现
在实际开发中，我们通常会将 Action 和 Reducer 分别放在不同的文件中。下面是一个简单的示例，它演示了如何在 Redux 中实现一个 Todo List 应用程序。
Action
在 actions.js 文件中，我们定义了两个 Action：
-- -------------------- ---- -------
------ ----- ------- - ---- ----- -- --
----- -----------
-------- -
---
-----
---------- -----
-
--
------ ----- ---------- - -- -- --
----- --------------
-------- -
--
-
--在上面的代码中，addTodo 和 toggleTodo 分别表示添加和切换 Todo 项的事件。它们都返回一个包含 type 和 payload 属性的 Action 对象。
Reducer
在 reducers.js 文件中，我们定义了一个 Reducer：
-- -------------------- ---- -------
----- ----- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ -
---------
--------------
-
---- --------------
------ -------------- --
------- --- -----------------
- - -------- ---------- --------------- -
- ----
-
--------
------ -----
-
-
------ ------- -----在上面的代码中，todos 函数是一个 Reducer 函数。它接收两个参数：state 和 action。根据 Action 的 type 属性，它选择相应的处理逻辑，并返回一个新的状态。
Store
在 store.js 文件中，我们创建了一个 Redux Store：
import { createStore } from 'redux'
import todos from './reducers'
const store = createStore(todos)
export default store在上面的代码中，我们使用 createStore 函数创建了一个新的 Store。它接收一个 Reducer 函数作为参数，并返回一个新的 Store 对象。
组件
在 App.js 文件中，我们定义了一个 TodoList 组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ - ------- - ---- -------------
------ - -------- ---------- - ---- -----------
----- -------- - -- ------ -------- ---------- -- -- -
----- ------ -------- - ------------
----- ------------ - - -- -
------------------
-- ------------- -
------------------- ------------
-----------
-
-
------ -
-----
----- ------------------------
------ ------------ ----------- -- ------------------------ --
------- ----------------- -------------
-------
----
--------------- -- -
---
-------------
----------- -- --------------------
-------- --------------- -------------- - -------------- - ------ --
-
-----------
-----
---
-----
------
-
-
----- --------------- - ----- -- --
------ -----
--
----- ------------------ - -
--------
----------
-
------ ------- --------
----------------
------------------
-----------在上面的代码中，我们使用 connect 函数将 TodoList 组件与 Redux Store 连接起来。connect 函数接收两个参数：mapStateToProps 和 mapDispatchToProps。mapStateToProps 函数用于将 Store 中的状态映射到组件的 props 中，mapDispatchToProps 函数用于将 Action Creator 映射到组件的 props 中。
结论
在本文中，我们介绍了 Redux 中 Action 和 Reducer 的概念，并演示了如何在 Redux 中实现一个 Todo List 应用程序。通过学习本文，你可以了解到 Redux 的基本原理，掌握如何使用 Action 和 Reducer 来控制数据源。希望本文对你有所帮助，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674593f5c1a23897eaa0fcc1