Redux 中的 action、reducer、store 详解
Redux 是一个用于 JavaScript 应用的可预测状态容器。它有三个重要的概念：action、reducer、store。本文将详细讲解这三个概念，以帮助读者更深入理解 Redux 的工作原理，从而更好的使用 Redux。
action
action 是 Redux 中改变状态的唯一途径。它是一个普通的 JavaScript 对象，其中必须包含一个 type 字段，用于描述本次状态改变的类型。另外，payload 字段可选，用于携带本次状态改变所需的数据。通常会使用一个函数来创建 action，称为 action creator。例如：
-- -------------------- ---- ------- -- -- ------ ----- ----- -------- - ----------- ----- ----------- - -------------- -- -- ------ -------- -------- ------------------- - ------ - ----- --------- -------- - ---- - -- - -------- -------------------- - ------ - ----- ------------ -------- - -- - -- -
上面代码中，定义了两种 action type，分别对应添加和完成一个任务的操作。接着定义了两个 action creator 函数，分别用于创建不同类型的 action。addTodoAction 和 toggleTodoAction 函数都是一个纯函数，它们只是负责返回一个标准的 action 对象。
reducer
reducer 负责处理 action，并修改应用的状态。Reducer 是一个纯函数，它接收当前的状态和处理 action 后得到的新状态，然后返回一个新的状态。Reducer 需要保证它是纯函数，也就是只依赖于输入，不会影响到外部的状态。
下面是一个示例：
-- -------------------- ---- -------
-- -- -------
-------- ----------------- - --- ------- -
------ ------------- -
---- ---------
------ -
---------
- --- ----------- ----- -------------------- ---------- ----- --
--
---- ------------
------ ---------------- --
------- --- ----------------- - - -------- ---------- --------------- - - ----
--
--------
------ ------
-
-上面代码中，todoReducer 是一个纯函数，它接收一个状态和一个 action 对象，它的作用就是根据传进来的 action 对象来修改当前的状态。它首先判断 action 的类型，如果是 ADD_TODO，则返回一个新的数组，并将传递来的数据展开到新数组中。接着，如果是 TOGGLE_TODO，则返回一个新的数组，并使用 map 方法来处理每一个任务的状态。注意，每当 reducer 修改状态时，都需要返回一个全新的状态，而不是在原有状态上进行修改。
store
store 是 Redux 中唯一的管理者，它维护应用的状态，负责接收 action 并派发给 reducer。在创建 store 时，需要将 reducer 传入 createStore 方法：
// 创建 store const store = createStore(todoReducer);
在 store 创建后，就可以对状态进行访问和修改。我们可以用 getState() 方法来获取应用的当前状态，用 dispatch(action) 方法来派发 action。例如：
// 获取当前状态
const currentState = store.getState();
// 派发 action
store.dispatch(addTodoAction("Buy milk"));当派发一个 action 时，store 首先会将它传递给 reducer，让 reducer 处理这个 action，并返回一个新的状态。store 会自动将这个新状态更新到自己维护的状态中。Redux 规定，当一个 action 被派发到 store 后，所有的 reducer 都会收到这个 action，并有机会处理它。由于每个 reducer 只处理状态树的一部分，所以应该把状态分解成多个部分，每个部分由自己的 reducer 处理，最后将它们合并成一个完整的状态树。
-- -------------------- ---- -------
------ - ---------------- ----------- - ---- --------
-- ---- -------
-------- ----------------- - --- ------- -
------ ------------- -
---- -----------
------ - --------- ----------------- --
--------
------ ------
-
-
-------- ----------------- - --- ------- -
------ ------------- -
---- ---------
------ -
---------
- --- ----------- ----- -------------------- ---------- ----- --
--
---- ------------
------ ---------------- --
------- --- ----------------- - - -------- ---------- --------------- - - ----
--
--------
------ ------
-
-
-- -- -------
----- ----------- - -----------------
----- ------------
----- ------------
---
-- -- -----
----- ----- - -------------------------上面代码中，userReducer 和 todoReducer 是两个不同的 reducer 函数，分别处理用户信息和任务列表。通过 combineReducers 全局将这两个 reducer 合并成一个状态树。最后，我们用 createStore 来创建 store。
总结
Redux 中的 action、reducer、store 是实现状态管理的三个重要概念。action 是定义操作的纯对象，reducer 是根据 action 修改状态的纯函数，store 负责整个应用的状态管理。了解这三个概念是使用 Redux 的前提，只有深入掌握它们的工作原理，才能更好的使用 Redux。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645206c7675af4061b5b870a