Reducer

引言

我们已经学习了 Redux 及其 React 状态管理解决方案。随着 Redux 的兴起，Reducer 在开发者中获得了极大的普及。我们不需要学习 Redux 就能理解 Reducer。了解 Redux 可能会帮助我们更快地适应。在本文中，我们将学习 Reducer 及其含义，让我们开始吧。

Reducer 可以被定义为一个纯函数，当它以应用程序的状态和动作作为参数时，会返回一个新的状态。通常来说，Reducer 是应用程序中的状态管理器。考虑一个例子，我们在 HTML 中为一个输入字段编写代码。Reducer 会据此管理应用程序的 UI 状态或受控组件。

再举一个例子，如果我们设计一个认证 Reducer，它可以在应用程序的初始阶段接收一个空对象。我们可以通知用户他已登录，并返回到用户被标记为已登录状态。就是这么简单。

实施

在实现 Reducer 之前，我们可能需要从纯函数的基础开始。纯函数就是没有任何副作用的函数，只要传入相同的参数，它们就会返回相同的结果。状态管理也是一种纯函数，与之相关的动作也可以被视为纯函数。考虑下面的代码：

上面的示例根据我们提供的输入字段 2 和 3 返回一个值，只要输入相同，我们总是会得到 6 作为输出。其他任何东西都无法影响我们得到的输出。同样，Reducer 可以轻松地以相同的方式实现。考虑下面的代码：

在上面的代码中，我们定义了与 Reducer 相关的 state 和 action 属性。让我们深入了解它们。

国家

状态可以被视为数据组件，它保存组件所需的数据，并指示组件渲染，如果对象更改其状态，则重新渲染。在 Redux 管理的应用程序中，Reducer 是状态更改发生的地方。

操作

动作可以被定义为一个对象，它包含信息的有效负载，或者触发 Redux 应用程序状态更改的负责组件。在 JavaScript 中，动作默认是状态，它们告诉 Redux 执行特定类型的任务。考虑下面的代码：

动作可以被定义为一个对象，它包含信息的有效负载，或者触发 Redux 应用程序状态更改的负责组件。在 JavaScript 中，动作默认是状态，它们告诉 Redux 执行特定类型的任务。

一个 reducer 函数接受两个参数，即当前状态和动作，并根据这两个参数显示结果到一个新状态。考虑以下语法：

同样，也实现了 reducer 函数。考虑以下代码：

在这种情况下，reducer 函数将计数增加一，因为当前状态是一个整数。将 state 重命名为 count 并不会有什么坏处，因为参数变得更易读，并且对初学者来说是一个更好的方法。这使得 Reducer 函数成为推理状态变化以及在隔离环境中进行测试的理想选择。您可以重复相同的测试，使用相同的输入和相同的输出。

此外，我们还可以执行条件状态转换，就像我们在核心程序中那样。您可以使用增加和减少计数的相同概念来执行条件状态转换，就像我们在示例代码中所做的那样。考虑以下代码：

相反，可以说 JavaScript 中的 reducers 是数组中最有用的方法之一，它应该始终是开发者社区的工具箱中的成员。Reducers 可以被间接称为 map 方法，它与数组一起使用，以在特定情况下提高它们的简洁性和性能。如前所述，reduce 方法会调用回调函数来处理数组中的每个存储元素，并输出操作生成器的最终值。Reducers 提供了一种更清晰的方式来迭代对象并高效地处理存储在数组块中的数据。

为了更深入地了解 reducers，我们可以借助下面显示的示例来创建自己的 reducer。在此示例中，我们实现了一个 reducer 函数来观察其内部工作原理。这个例子将让你更好地了解何时在 JavaScript 中使用 Reducer 来优化程序的性能。

首先，我们可以检查 reduce 方法是否在null或undefined 对象上调用。然后我们检查传入的回调是否是一个函数。

在上面的代码中，我们首先检查 reducer 方法是否由未定义或 null 对象调用。然后我们检查传入的回调是否可以被视为一个函数。

在这些初始类型检查之后，我们将传入的初始值赋给累加器。然后我们使用循环遍历数组，为每个数组项调用回调。执行结束后，我们必须返回累加器的值。

我们仅使用此实现来帮助您理解 reduce 方法的实际工作原理。例如，您可以看到它在内部使用for 循环来遍历数组。

注意：我们仅使用上述代码示例来理解 reducers 的整体概念以及方法的工作原理。因此，上述示例不是生产质量的代码，仅用于在标准 JavaScript 中创建 reducer 方法的原型。

结论

Reducers 是 Redux 中状态管理不可或缺的一部分。借助 Reducers，我们可以轻松地管理数据在不同模式下的异步传输并进行配置。使用 Reducers 的另一个优点是，我们可以编写纯函数来更新 Redux 应用程序的特定区域，而不会在其他区域产生任何副作用。在本教程中，我们学习了 Reducers 的基础和核心，以及它如何在 Redux 应用程序中管理状态。我们还通过各种示例学习了 reducers 的核心，即 state 和 actions。