useReducer 是 React 提供的一个强大的状态管理 Hook，专门用来处理复杂状态逻辑。其实，当你在项目里遇到状态增多、更新规则复杂时useState 写起来会变得凌乱不堪。而 useReducer 能让所有逻辑集中在一个地方，避免“状态管理成一团乱麻”的痛点。

一、useReducer 基础概念

至于语法，

const = useReducer;

再看参数说明，

• state: 当前状态对象。
• dispatch: 触发更新的函数。
• reducer: 处理并返回新状态的纯函数。
• initialState: 初始状态。

与 Redux 的相似之处：

function reducer {
switch {
case 'increment':
return { count: state.count + 1 };case 'decrement':
return { count: state.count - 1 };话说回来，default:
return state;}
}
function Counter {
const = useReducer;return (
<>

{state.count}
 dispatch}>+
 dispatch}>-
<>
);}

二、什么时候 useState 不够用了？

说到场景1，多个相关状态一起维护

用 useState 写法

如果你有这么多字段：

const = useState;const = useState;const = useState;const = useState;// ...
setLoading;api.login
.n => setLoading)
.catch => { setError;setLoading，});

因为字段增多。代码会变得越来越杂乱，你会发现自己在不断地复制粘贴一样的模式。

用 useReducer 写法

const initialState = {
username: ''。password: '',loading: false,error: ''
};function reducer {
switch {
case 'SET_USERNAME':
return { ...state,username: action.payload };怎么说呢，case 'LOGIN_START':
return { ...state。loading: true };
case 'LOGIN_FAIL':
return { ...state。loading: false,error: action.payload };其实，default:
return state;怎么说呢，}
}
const = useReducer;// 更新：
dispatch;

再看痛点提示，当你面对“登录、注册、忘记密码”等表单时往往需要同时管理输入值、校验错误、请求进度等。这些都是同一个业务流程的不同面向，用 useReducer 能把它们聚合到一起，避免分散更新导致的数据不一致。话说回来，

再看场景2，状态之间有关联

痛点提示的观点是。当你需要其他字段，若使用多个 useState ,很容易出现“数值不同步”的 bug。

function reducer {
switch{
case 'ADD_PRODUCT':
const count = state.count + action.payload.amount;return {
count,total: count * state.price。canSubmit: count> 0
};// ...
}
一次性更新所有相关字段。

再看场景3，状态更新逻辑复杂

痛点提示这方面，当你实现类似“云厂商 → CPU 架构 → 核数 → 产品代际”等级联选择。而且每一步都要异步请求接口填充后续选项时用多个 useState `setX` 很容易遗漏某个 update 或者导致渲染顺序错误。将所有交互封装在 reducer 内。可以保证一次性完成所有相关更新，并保持 UI 与数据同步。

dispatch({
说到type。'UPDATE_FILTER',payload:data
});

再看场景4，状态机—例如文件上传或支付流程

痛点提示的观点是。在上传文件、支付审核等流程中，你常常需要维护诸如 “idle / uploading / success / error” 等四个布尔标志。分别用 `useState` `setUploading` `setSuccess` 等方式会让组件代码冗长且难以追踪；而一个简单的枚举型 state 更加直观易懂。