前言
在 React 应用中，Redux 是一个非常重要的状态管理工具。Redux 的核心原则是单一数据源，通过 actions 和 reducers 来改变应用的状态。而 reducer 是 Redux 的核心概念之一。本文将深入浅出地介绍 Redux 源码中的 reducer，以及如何理解 reducer 工作原理。
reducer 基础概念
在 Redux 应用中，reducer 是一个纯函数，它接收当前 state 和 action 作为参数，返回一个新的 state。reducer 的作用是更新应用的状态，并且是唯一可以更新状态的地方。
Redux 应用中的 state 是不可变的，所以 reducer 函数返回的 state 是一个全新的 object，而不是修改原有的状态。这种方式可以保证 Redux 的可预测性，即通过相同的输入参数，输出结果总是相同的。
一个简单的 reducer 函数示例如下：
-- -------------------- ---- -------
-------- --------------- - ------------- ------- -
------ ------------- -
---- --------------------
------ -
---------
-------- ------------- - --
--
---- --------------------
------ -
---------
-------- ------------- - --
--
--------
------ ------
-
-在这个 reducer 函数中，它接收当前的 state 对象和 action 对象。根据不同的 action 类型，返回一个新的 state 对象。
reducer 工作原理
在 Redux 应用中，reducer 函数的执行会被称为 dispatch。当用户执行一个 action 时，Redux 会调用对应的 reducer 函数，并传入当前的 state 和 action。
在 Redux 中，当 dispatch 调用 reducer 函数时，reducer 会返回一个新的 state 对象。Redux 会保留这个新的 state，并将其作为下一个 dispatch 的 state，并且通知所有的监听器。这样，应用中的视图和数据都只和一个 state 对象打交道。
根据 reducer 的实现方式，Redux 可以很容易地实现 undo/redo、时间旅行等功能。因为 Redux 会将每一个状态都保存下来，并且可以方便地切换到任意一个历史状态。
Redux 源码实现
在 Redux 源码中，reducer 是一个非常重要的部分。在 Redux 中，reducer 被称为 reducer function，它存放在 Redux 的 state tree 中，并且是一个 key-value 对象。每一个 key 都对应了一个 reducer function。
reducer function 内部通过 switch case 来处理不同的 action，返回一个新的 state。
示例代码如下：
-- -------------------- ---- -------
-------- ------------- - --- ------- -
------ ------------- -
---- ----------- -
------ -
---------
------ -
---------------
- --- ---------- ----- ------------ ---------- ----- --
--
--
-
---- -------------- -
------ -
---------
------ ---------------------- --
------- --- ---------
- - -------- ---------- --------------- -
- ----
--
--
-
--------
------ ------
-
-总结
reducer 是 Redux 的核心概念之一，它负责更新应用的状态。在 Redux 中，reducer 是唯一可以修改状态的地方，保证了 Redux 的可预测性。通过理解 reducer 的工作原理，可以更加深入地了解 Redux，进而提高应用的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6464cd7c968c7c53b05a78d4