Redux中的reducer为什么最好是纯函数？

Cosolar
422 阅读5分钟

Redux 中的 reducer 是一个纯函数，这是 Redux 框架基本的要求，要求 reducer 必须是一个纯函数，否则在应用程序中使用它可能会引发意外的副作用。在这篇文章中，我们将详细讲解 reducer 为何必须是纯函数，以及这种做法的优点和原因。

一、什么是 reducer？

在 Redux 应用程序中，reducer 是用于执行应用程序状态更新的纯函数。可理解为每一次修改状态都需要经过 reducer 执行，而 reducer 接收两个参数：当前的应用程序状态和表示状态更改的 action 对象。

我们可以通过编写 reducer 函数来更新状态，它会根据给定的 action 类型来判断应用程序状态的更改方式，并返回计算后的新状态。

下面是一个简单的 reducer 函数示例：

const initialState = {
  count: 0
};

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

在这个示例中，我们定义了一个名为 counterReducer 的函数，它将接收应用程序的初始状态和表示状态更改的 action 对象。此函数对两个参数进行操作，并根据给定的 action 类型来更新应用程序的状态。如果传入的 action 类型未知，则返回当前的状态作为默认值。

二、什么是纯函数？

在开始讨论 reducer 的纯函数性质之前，请先了解一下纯函数的概念。在计算机编程领域，纯函数是指一个函数在相同的输入数据条件下总是返回相同的输出结果，并且不会产生副作用。这个定义可能比较抽象，接下来我们结合代码示例和解释来更好地理解它。

首先，我们来了解一下副作用。副作用是指在函数内部进行的任何修改或其他操作，例如更改输入参数、修改全局变量、读写文件等等。下面是一个简单的带副作用的函数示例：

let count = 0;

function increment() {
  count++;
  return count;
}

在这个函数中，我们声明了一个全局变量 count 并初始化为 0。每当我们调用 increment() 函数时，count 就会增加 1 个单位，这意味着我们无法保证在每次调用该函数时都会获得相同的输出结果，因此它不符合纯函数的定义。

接下来，我们看一个没有副作用的函数示例：

function add(a, b) {
  return a + b;
}

这个函数只接受两个数字参数，执行加法运算并返回结果。由于它没有进行任何修改或其他副作用，所以我们可以保证在给定相同的输入值时它总是会返回相同的结果。这意味着它符合纯函数的定义。

总结一下，纯函数具有以下几个特点：

  • 给定相同的输入参数，总是返回相同的输出结果
  • 不修改函数所接收的任何参数或全局状态
  • 不依赖于函数外部的其他变量或状态

三、为什么 reducer 必须是纯函数？

Redux 中要求 reducer 必须是纯函数，这意味着它必须具备纯函数的所有特征。为了更好地理解 reducer 函数为什么必须是纯函数，我们来看一下以下两个示例：

function impureReducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      state.count++;
      return state;
    default:
      return state;
  }
}

function pureReducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    default:
      return state;
  }
}

在第一个示例中，我们定义了一个不纯的 reducer 函数。它接收 state 和 action 参数，并根据 action.type 来更新应用程序状态。正如您看到的那样，它会修改输入参数 state 的值，这会导致它在相同的输入条件下返回不同的结果。这也是因为它产生了副作用。

在第二个示例中，我们定义了一个纯函数的 reducer。它接收相同的 state 和 action 参数，但是它不会修改任何参数或产生副作用。它只是根据 action.type 来返回新的状态对象。因此，在相同的输入值条件下，它总是会返回相同的输出结果，并且它不会对外部状态进行任何修改，这意味着它符合纯函数的定义。

由此可知，Reducer 必须是纯函数，为了确保我们可以在 Redux 应用程序中正确定义和跟踪状态变化。如果我们使用不纯的 reducer，那么应用程序状态可能会出现不可预测的问题，这可能导致应用程序行为不一致，也可能会让我们难以理解和调试代码。

四、纯函数的优点

除了遵循 Redux 框架的规则之外，使用纯函数编写 reducer 还有以下优点：

1、易于测试

由于纯函数不会改变任何外部状态或产生副作用，因此测试这些函数非常容易。我们不必担心模拟等其他复杂操作，只需要传递输入参数调用函数并检查返回值即可。

2、更容易推断应用程序状态

使用纯函数可以更轻松地描述状态变化。我们可以将 reducer 视为用于计算应用程序状态的映射函数，这可以将状态更改描述为输入和输出之间的简单关系。这使我们能够更容易地预测应用程序的行为。

3、更容易了解代码

纯函数代码通常比不纯函数更容易理解。由于它们不会影响或依赖于外部状态，因此它们往往更加模块化，更容易阅读和调试。

五、结论

在 Redux 应用程序中，reducer 是一个非常重要的组件，用于更新应用程序状态。由于 reducer 必须遵循 Redux 框架的规则，它必须是纯函数，并同时满足以下条件：

  • 接收相同的输入参数时始终返回相同的输出结果
  • 不会修改或影响外部状态或变量
  • 不依赖外部状态或变量

这种方式提供了几个优点，包括更好的可测试性、更容易推断应用程序状态和更容易理解的代码。总之，通过编写纯函数的 reducer 我们可以保证应用程序的状态变化是可预测和易于管理的。

avatar
文章
阅读
粉丝