React中“reducer”为何得名？useReducer术语解析

这个术语的源头得从JavaScript原生的Array.reduce方法说起——这也是“reduce”（缩减）字面意思的直接来源。

在Array.reduce里，你会传入一个reducer函数和一个初始值。这个reducer函数每次接收两个参数：当前的累积值（accumulator）和数组里的当前元素，处理后返回一个新的累积值。整个遍历结束后，原本的数组就被“缩减”成了一个单一的最终值。比如求和：

const sumReducer = (accumulator, num) => accumulator + num;
const total = [1,2,3].reduce(sumReducer, 0);
// 数组被缩减成了单一值6

React里的reducer，本质和这个逻辑同源：
它接收两个参数——当前的应用状态（state）和一个动作（action），经过逻辑处理后返回一个新的状态。每次你dispatch一个action，就相当于让reducer把“当前状态”和“动作”这两个输入，“缩减”成一个输出（新状态）。

再看个React reducer的例子：

const countReducer = (state, action) => {
  switch(action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

每次触发dispatch({type: 'INCREMENT'})，reducer就把当前的state和这个action，转换成了新的state——这就是“缩减”的核心：把多个输入（状态+动作）转换成单一输出（新状态）。

另外这个概念最早来自函数式编程，后来被Redux普及开来，React的useReducer就是借鉴了Redux的reducer模式。Redux里的reducer负责集中处理所有状态更新逻辑，把分散的状态变化动作，统一“缩减”成一个单一的状态更新入口，这也进一步强化了“reducer”的命名逻辑。

内容的提问来源于stack exchange，提问作者yaquawa