前端Wiki/词条/useReducer

useReducer

定义useState 的进阶版，用 reducer 函数集中管理多字段、多规则的状态流转

当状态更新逻辑超过两行、或者一个操作要同时改多个关联字段时，继续用一堆 useState 会让代码散落得到处都是。useReducer 把所有变更收拢到一个 reducer 纯函数里：传入当前 state 与 action，返回新 state。组件只负责派发 action，逻辑与视图解耦，测试也更容易。

经典搭档场景是复杂表单：一个 action 携带字段名和值，reducer 里统一更新； undo/redo、分页器、购物车这种规则多的场景同样适合。初学者别把它神化——能一个 useState 搞定的简单状态，硬套 reducer 反而增加模板代码。

适合多字段、规则复杂、需要动作语义化的状态场景
reducer 必须是纯函数：不能直接改 state，要返回新对象
dispatch 引用稳定，不必担心重渲染导致回调失效

JavaScript

import { useReducer } from 'react';

function formReducer(state, action) {
  switch (action.type) {
    case 'field':
      return { ...state, [action.name]: action.value };  // 不可变更新
    case 'reset':
      return { name: '', age: '' };
    default:
      return state;
  }
}

function Form() {
  const [state, dispatch] = useReducer(formReducer, { name: '', age: '' });
  return (
    <form>
      <input value={state.name}
        onChange={(e) => dispatch({ type: 'field', name: 'name', value: e.target.value })} />
      <button type="button" onClick={() => dispatch({ type: 'reset' })}>重置</button>
    </form>
  );
}

⚠ 常见误区

在 reducer 里直接修改 state 字段，导致 React 检测不到变化
简单计数器也强行用 useReducer，徒增模板代码
action 命名随性、type 不统一，后期维护时 reducer 变成糊涂账

🔗 相关词条useState 状态基础多字段表单统一处理