useReducer

React 课程的一部分

结账表单一开始都很简单。先有一个值，于是加一个 useState。接着需要一条错误提示，那就再加一个 useState。然后是“正在加载”的标记，再然后是“用户有没有碰过这个字段”的标记，到这一步，四份彼此独立的状态要由六个不同的事件处理器按正确的组合去更新。提交时要把加载标记置为 true、清空错误、禁用按钮；失败时要把加载标记置回 false 并把错误填上。每个处理器都是一小堆 setter 调用，而哪些组合才是合法的，这套规则只存在于你的脑子里。

useReducer 就是 React 对这件事给出的答案。与其把更新规则散落在各个处理器里，不如写一个函数，把状态允许发生的每一种变化都描述清楚，组件则按名字请求某种变化。可以把它想成一台自动售货机：机器持有全部状态，内部的接线决定每个按钮做什么，而你只是按下一个带标签的按钮，而不是伸手进去自己搬动里面的机械结构。