本文完整版：《React useReducer 终极应用教程》
useReducer 是在 react V 16.8 推出的钩子函数，从用法层面来说是能够代替useState。置信后期应用过 React 的前端同学，大都会经验从 class 语法向 hooks 用法的转变，react 的 hooks 编程给咱们带来了丝滑的函数式编程体验，同时很多前端驰名的文章也讲述了 hooks 带来的前端心智的转变，这里就不再着重强调，本文则是聚焦于 useReducer 这个钩子函数的原理和用法，笔者率领大家再一次深刻意识 useReducer。
家喻户晓，useState 罕用在单个组件中进行状态治理，然而遇到状态全局治理的时候，useState 显然不能满足咱们的需要，这个时候大多数的做法是利用第三方的状态管理工具，像 redux，Recoil 或者 Mobx，在代码里就会有
import XXX from Mobx;import XXX from Redux;// orimport XXX from Recoil;这些三方的 import 语句。弱小的 React 团队难道就不能自己实现一个全局的状态治理的 hook 吗，这不，useReducer 为了解决这个需要应运而生。 尽管有了useReducer，然而黄金法令仍旧成立：组件的状态交给组件治理，redux负责工程的状态治理。本文则负责解说useReducer是如何执行全局的状态治理，并且什么时候用适合，什么时候不适合，这里也会提及。
另外如果你正在搭建后盾管理系统，又不想解决前端问题，举荐应用卡拉云，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API ，无需懂前端，仅需拖拽即可疾速搭建属于你本人的后盾管理工具，一周工作量缩减至一天，详见本文文末。
useReducer 工作原理
在学习一个新个性的时候，最好的形式之一是首先相熟该个性的原理，进而能够促成咱们的学习。 useReducer 钩子用来存储和更新状态，有点相似 useState 钩子。在用法上，它接管一个reducer函数作为第一个参数，第二个参数是初始化的state。useReducer最终返回一个存储有以后状态值的数组和一个dispatch函数，该dispatch函数执行触发action，带来状态的变动。这其实有点像redux，不过还是有一些不同，前面笔者会列举这两个概念和不同。
对于 reducer 函数
通常的，reduce办法在数组的每一个元素上都执行reducer函数，并返回一个新的value，reduce办法接管一个reducer函数，reducer函数自身会接管4个参数。上面这段代码片段揭示一个reducer是如何运行的：
const reducer = (accumulator, currentValue) => accumulator + currentValue;[2, 4, 6, 8].reduce(reducer)// expected output: 20在React中，useReducer接管一个返回单组值的reducer函数，就像上面这样：
const [count, dispatch] = useReducer(reducer, initialState);后面提到过，这里的reducer函数自身会承受两个参数，第一个是state，第二个是action，这个action会被dispatch执行，就像是：
function reducer(state, action) { }dispatch({ type: 'increment' })依据不同的action ，reducer函数会带来不同的state的变动，就像是 type 是 increment的状况，reducer函数会使得state 加1。
懈怠创立初始 state
在编程概念中，懒初始化是提早创建对象的一种伎俩，相似于直到被须要的第一工夫才去创立，还有其余的动作比方值的计算或者昂扬的计算开销。正如下面提到的，useReducer 的第三个参数是一个可选值，可选的懒创立state的函数，上面的这段代码是更新state的函数：
const initFunc = (initialCount) => { if (initialCount !== 0) { initialCount=+0 } return {count: initialCount};}// wherever our useReducer is locatedconst [state, dispatch] = useReducer(reducer, initialCount, initFunc);当initialCount变量不为0的时候，赋值为0；并返回count的赋值对象。留神第三个参数是一个函数，并不是一个对象或者数组，函数中能够返回对象。
dispatch 函数
dispatch函数是触发不同action的函数，通常的它是承受含有type的一个对象，并依据这个type来执行对应的action，action执行实现之后，render函数持续发挥作用，这时候会更新state。当咱们关注的焦点不在useReducer用法细节上时，咱们会在宏观上看到render和state的变动过程。 组件触发的action都是接管含有type 和 payload的对象，其中type代表不同action的区别，payload是action将要增加到state的数据。 在应用上，dispatch用起来十分的简略，就拿JSX语法来讲，能够间接在组件事件上触发action操作，代码如下：
// creating our reducer functionfunction reducer(state, action) { switch (action.type) { // ... case 'reset': return { count: action.payload }; default: throw new Error(); }}// wherever our useReducer is locatedconst [state, dispatch] = useReducer(reducer, initialCount, initFunc);// Updating the state with the dispatch functon on button click<button onClick={() => dispatch({type: 'reset', payload: initialCount})}> Reset </button>留神到，reducer函数接管payload作为传参，其中这个payload是来自dispatch的奉献，初始化的state也是会影响payload的。组件之间，应用props传递数据的时候，其实dispatch也是间接能够封装在函数中，这样不便的从父组件将dispatch传递到子组件，就像上面这样：
<Increment count={state.count} handleIncrement={() => dispatch({type: 'increment'})}/>在子组件中，接管props，触发的时候，则有：
<button onClick={handleIncrement}>Increment</button>不触发dispatch
如果useReducer返回的值和以后的一样，React不会更新组件，也不会引起effect的变动，因为React外部应用了Object.is 的语法。
useState 和 useReducer 比拟和区别及利用场景
置信浏览React官网文档学习的同学，第一个接触的Hook就是useState，useState是一个根底的治理state变动的钩子，对于更简单的state治理，甚至全局的state治理，useReducer是用来干这件事件的。然而，useState其实是应用到useReducer的，这意味着，只有是应用useState实现的，都能够应用useReducer去实现。 然而呢，这两个钩子useReducer 和 useState还是有不同的，在用useReducer的时候，能够防止通过组件的不同级别传递回调。useReducer 提供dispatch在各个组件之间进行传递，这种形式进步了组件的性能。 然而，这并不意味着每一次的渲染都会触发useState函数，当在我的项目中有简单的state的时候，这时候就不能用独自的setter函数进行状态的更新，相同的你须要写一个简单的函数来实现这种状态的更新。因而举荐应用useReducer，它返回一个在从新渲染之间不会扭转的 dispatch 办法，并且您能够在 reducer 中有操作逻辑。还值得注意的是，useState最初是触发的update 来更新状态，useReducer 则是用dispatch来更新状态。 接下来咱们来看这两种钩子函数：useState 和 useReducer 是如何申明和应用的。
用 useState 申明 state
useState 的申明语句十分的简略，例如：
const [state, setState] = useState('default state');useState 返回一个保留以后state和更新state的数组，这里的setState是更新state的函数。
用 useReducer 申明state
应用useReducer 的时候看上面的语句：
const [state, dispatch] = useReducer(reducer, initialState)useReducer 返回一个保留以后state和一个更新state的dispatch函数。这个dispatch函数有点相似setState，咱们在用setState更新state的时候，是这样用：
<input type='text' value={state} onChange={(e) => setState(e.currentTarget.value)} />在onChange事件中调用setState更新以后的state。比照应用useReducer 钩子，能够这样表白：
<button onClick={() => dispatch({ type: 'decrement'})}>Decrement</button>这里的语意是当用户点击按钮的时候，会触发dispatch，执行type是decrement的action。另外在应用dispatch函数咱们还能够传payload：
<button onClick={() => dispatch({ type: 'decrement',payload:0})}>Decrement</button>咱们晓得useReducer 能够解决简单多层state的状况，这里笔者持续举该类状况的例子：
const [state, dispatch] = useReducer(loginReducer, { users: [ { username: 'Philip', isOnline: false}, { username: 'Mark', isOnline: false }, { username: 'Tope', isOnline: true}, { username: 'Anita', isOnline: false }, ], loading: false, error: false, },);useReducer 接管一个初始对象，对象的key蕴含users，loading，error。应用useReducer 治理本地state的不便之处是用useReducer 能够扭转局部的state，也就是说，这里能够独自扭转users。
调试 Vue UI 组件太麻烦？
试试卡拉云，无需懂前端，拖拽即可生成前端组件，连贯 API和数据库间接生成后盾零碎，两个月的工期升高至1天
useReducer 用法之能够应用的场景
在开发我的项目的时候，随着咱们工程的体积一直的变大，其中的状态治理会越来越简单，此时咱们最好应用 useReducer。useReducer 提供了比 useState 更可预测的状态治理。当状态治理变的简单的时候，这时候 useReducer 有着比useState 更好的应用体验。 这里的不得不重提一个法令：当你的 state 是根底类型，像 number，boolean，string 等，这时候应用 useState 是一种更简略、更适合的抉择。 上面笔者将创立一个登陆的组件，让读者领会应用 useReducer 的益处。
创立一个登陆组件
为了让咱们更好的了解useReducer 的用法，这里创立一个登陆组件，并比拟一下应用useState 和 useReducer 在状态治理用法上的异同。 首先咱们先用useState创立登陆组件：
import React, { useState } from 'react';export default function LoginUseState() { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [isLoading, showLoader] = useState(false); const [error, setError] = useState(''); const [isLoggedIn, setIsLoggedIn] = useState(false); const onSubmit = async (e) => { e.preventDefault(); setError(''); showLoader(true); try { await function login({ username, password }) { return new Promise((resolve, reject) => { setTimeout(() => { if (username === 'ejiro' && password === 'password') { resolve(); } else { reject(); } }, 1000); }); } setIsLoggedIn(true); } catch (error) { setError('Incorrect username or password!'); showLoader(false); setUsername(''); setPassword(''); } }; return ( <div className='App'> <div className='login-container'> {isLoggedIn ? ( <> <h1>Welcome {username}!</h1> <button onClick={() => setIsLoggedIn(false)}>Log Out</button> </> ) : ( <form className='form' onSubmit={onSubmit}> {error && <p className='error'>{error}</p>} <p>Please Login!</p> <input type='text' placeholder='username' value={username} onChange={(e) => setUsername(e.currentTarget.value)} /> <input type='password' placeholder='password' autoComplete='new-password' value={password} onChange={(e) => setPassword(e.currentTarget.value)} /> <button className='submit' type='submit' disabled={isLoading}> {isLoading ? 'Logging in...' : 'Log In'} </button> </form> )} </div> </div> );}对于username，password，isLoading等的治理，都是应用的useState进行的解决，所以这里咱们应用了五个useState钩子函数，面对更多的state的时候，有时候咱们会放心咱们是否能够更好的治理这些state呢。这时候能够尝试用useReducer，间接在reducer 函数中治理全副的状态。
import React, { useReducer } from 'react';function loginReducer(state, action) { switch (action.type) { case 'field': { return { ...state, [action.fieldName]: action.payload, }; } case 'login': { return { ...state, error: '', isLoading: true, }; } case 'success': { return { ...state, isLoggedIn: true, isLoading: false, }; } case 'error': { return { ...state, error: 'Incorrect username or password!', isLoggedIn: false, isLoading: false, username: '', password: '', }; } case 'logOut': { return { ...state, isLoggedIn: false, }; } default: return state; }}const initialState = { username: '', password: '', isLoading: false, error: '', isLoggedIn: false,};export default function LoginUseReducer() { const [state, dispatch] = useReducer(loginReducer, initialState); const { username, password, isLoading, error, isLoggedIn } = state; const onSubmit = async (e) => { e.preventDefault(); dispatch({ type: 'login' }); try { await function login({ username, password }) { return new Promise((resolve, reject) => { setTimeout(() => { if (username === 'ejiro' && password === 'password') { resolve(); } else { reject(); } }, 1000); }); } dispatch({ type: 'success' }); } catch (error) { dispatch({ type: 'error' }); } }; return ( <div className='App'> <div className='login-container'> {isLoggedIn ? ( <> <h1>Welcome {username}!</h1> <button onClick={() => dispatch({ type: 'logOut' })}> Log Out </button> </> ) : ( <form className='form' onSubmit={onSubmit}> {error && <p className='error'>{error}</p>} <p>Please Login!</p> <input type='text' placeholder='username' value={username} onChange={(e) => dispatch({ type: 'field', fieldName: 'username', payload: e.currentTarget.value, }) } /> <input type='password' placeholder='password' autoComplete='new-password' value={password} onChange={(e) => dispatch({ type: 'field', fieldName: 'password', payload: e.currentTarget.value, }) } /> <button className='submit' type='submit' disabled={isLoading}> {isLoading ? 'Logging in...' : 'Log In'} </button> </form> )} </div> </div> );}在应用useReducer 代替useState的过程中，咱们会发现useReducer会使咱们更聚焦于type和action，举个例子说，当执行login动作的时候，会将isLoading，error 和 state进行赋值：
case 'login': { return { ...state, error: '', isLoading: true, }; }体验好的一点是，咱们再也不须要被动去更新state，useReducer 的赋值会间接帮忙咱们解决所有的问题。
何时该应用 useReducer 实战利用案例
useReducer 最小化的范式
且看上面最简略的例子：
const initialState = 0;const reducer = (state, action) => { switch (action) { case 'increment': return state + 1; case 'decrement': return state - 1; case 'reset': return 0; default: throw new Error('Unexpected action'); }};代码很简略，首先定义一个初始化的 state：initialState = 0；之后在reducer函数中通过switch 来对state执行不同的操作。留神到，这里的state其实是个 number 对象，这在 Redux 的使用者看来或者有一些纳闷，因为在redux 中都是用 object 来解决的。这其实是 useReducer 的不便之处。 在组件中，经常会有点击事件带来状态变动的状况，比如说购物车组件中商品数量的减少，点击加号商品数量会加一，这个时候下面的代码就能够利用到组件中，例如：
const Example01 = () => { const [count, dispatch] = useReducer(reducer, initialState); return ( <div> {count} <button onClick={() => dispatch('increment')}>+1</button> <button onClick={() => dispatch('decrement')}>-1</button> <button onClick={() => dispatch('reset')}>reset</button> </div> );};当用户点击+1的按钮时，dispatch 会登程 increment 的 action，count +1 ，所以会看到 state 变动后的后果。这种 type 其实能够定义很多，抉择适合的数量即可。
useReducer action 对象
上面的例子其实有点像 redux 的用法，习惯redux的同学可能会比拟相熟：
const initialState = { count1: 0, count2: 0,};const reducer = (state, action) => { switch (action.type) { case 'increment1': return { ...state, count1: state.count1 + 1 }; case 'decrement1': return { ...state, count1: state.count1 - 1 }; case 'set1': return { ...state, count1: action.count }; case 'increment2': return { ...state, count2: state.count2 + 1 }; case 'decrement2': return { ...state, count2: state.count2 - 1 }; case 'set2': return { ...state, count2: action.count }; default: throw new Error('Unexpected action'); }};初始化的state是一个对象，并且return 进来的也是一个对象。和后面的那个例子相比，除了多了不同的case之外，在更新state通过对象赋值的形式进行。initialState 对象中是有两个key，在更新的时候针对指定的key更新即可。下面的例子看起来有些简单，把它用到组件上，会简化应用过程：
const Example02 = () => { const [state, dispatch] = useReducer(reducer, initialState); return ( <> <div> {state.count1} <button onClick={() => dispatch({ type: 'increment1' })}>+1</button> <button onClick={() => dispatch({ type: 'decrement1' })}>-1</button> <button onClick={() => dispatch({ type: 'set1', count: 0 })}>reset</button> </div> <div> {state.count2} <button onClick={() => dispatch({ type: 'increment2' })}>+1</button> <button onClick={() => dispatch({ type: 'decrement2' })}>-1</button> <button onClick={() => dispatch({ type: 'set2', count: 0 })}>reset</button> </div> </> );};Example2 组件中，上半局部显示的是count1 的变动，下半局部则是显示count2的变动。也是通过点击button来触发dispatch，引起state变动。
useReducer 在文本框组件中应用
后面的两个例子都是通过button下面的onClick事件来触发，在平时的业务开发中，输入框组件的onChange事件也是咱们常应用的办法，此时咱们也能够联合useReducer来联合输入框的value属性应用，做到实时展现输出的内容，使得组件受控，见上面的代码：
const initialState = '';const reducer = (state, action) => action;const Example03 = () => { const [firstName, changeFirstName] = useReducer(reducer, initialState); const [lastName, changeLastName] = useReducer(reducer, initialState); return ( <> <div> First Name: <TextInput value={firstName} onChangeText={changeFirstName} /> </div> <div> Last Name: <TextInput value={lastName} onChangeText={changeLastName} /> </div> </> );};当咱们在TextInput 组件中自定义onChangeText 办法，这个时候通过 changeFirstName 函数，扭转changeFirstName值，进而扭转value值。
useReducer 联合 useContext 应用
在日常的开发中，组件之间共享state的时候，很多人应用全局的state，尽管这样能够满足需要，然而升高了组件的灵活性和扩展性，所以更优雅的一种形式是应用useContext，对于useContext不相熟的同学能够参考react官网文档对于这一部分的解说。在本例子中，笔者将应用useContext 和 useReducer 函数一起应用，看上面的代码：
const CountContext = React.createContext();const CountProvider = ({ children }) => { const contextValue = useReducer(reducer, initialState); return ( <CountContext.Provider value={contextValue}> {children} </CountContext.Provider> );};const useCount = () => { const contextValue = useContext(CountContext); return contextValue;};useCount 函数是自定义的hook，和失常的hook应用的形式是统一的。那么组件在应用useCount 钩子的时候，能够像上面这样用：
const Counter = () => { const [count, dispatch] = useCount(); return ( <div> {count} <button onClick={() => dispatch({ type: 'increment' })}>+1</button> <button onClick={() => dispatch({ type: 'decrement' })}>-1</button> <button onClick={() => dispatch({ type: 'set', count: 0 })}>reset</button> </div> );};// now use itconst Example05 = () => ( <> <CountProvider> <Counter /> <Counter /> </CountProvider> <CountProvider> <Counter /> <Counter /> </CountProvider> </>);useCount 会走外部的useReducer,这个时候通过dispatch函数会扭转对应的state的状态。
useReducer 订阅的须要
Context应用的场景其实是在组件之间，然而如果在组件的内部，这个时候咱们须要应用订阅来做。这个时候咱们能够订阅一个共享的state，并当state更新的时候去更新组件。对于后面的那个应用Context的例子，这里咱们用订阅实现一下。 第一步，首先写一个最简略的useReducer:
const useForceUpdate = () => useReducer(state => !state, false)[1];接下里写一个函数创立共享的state并返回一个钩子函数：
const createSharedState = (reducer, initialState) => { const subscribers = []; let state = initialState; const dispatch = (action) => { state = reducer(state, action); subscribers.forEach(callback => callback()); }; const useSharedState = () => { const forceUpdate = useForceUpdate(); useEffect(() => { const callback = () => forceUpdate(); subscribers.push(callback); callback(); // in case it's already updated const cleanup = () => { const index = subscribers.indexOf(callback); subscribers.splice(index, 1); }; return cleanup; }, []); return [state, dispatch]; }; return useSharedState;};这里咱们应用了useEffect钩子函数，在这个钩子函数中，咱们订阅一个回调函数来更新组件，当组件卸载的时候，咱们也会革除订阅。 接下来咱们创立两个共享的state：
const useCount1 = createSharedState(reducer, initialState);const useCount2 = createSharedState(reducer, initialState);用一下这个钩子函数：
const Counter = ({ count, dispatch }) => ( <div> {count} <button onClick={() => dispatch({ type: 'increment' })}>+1</button> <button onClick={() => dispatch({ type: 'decrement' })}>-1</button> <button onClick={() => dispatch({ type: 'set', count: 0 })}>reset</button> </div>);const Counter1 = () => { const [count, dispatch] = useCount1(); return <Counter count={count} dispatch={dispatch} />};const Counter2 = () => { const [count, dispatch] = useCount2(); return <Counter count={count} dispatch={dispatch} />};最初咱们用一个函数组件封装Counter:
const Example06 = () => ( <> <Counter1 /> <Counter1 /> <Counter2 /> <Counter2 /> </>);这里的count的更新都是应用共享的useCount钩子函数。
useReducer 用法之不该应用的场景
这是一个好的问题，后面介绍了应用useReducer 的状况，然而什么时候咱们不能够用useReducer 呢。 为了更好的了解这个问题，笔者首先说一下应用useReducer 根本的心智，useReducer 是能够帮忙咱们治理简单的state , 然而咱们也不应该疏忽redux在某些状况下可能是更好的抉择。 最开始咱们的想法是咱们尽量避免应用第三方的state管理工具，当你有纳闷是否要应用他们时，阐明这不是用他们的时候。 上面笔者列举几个应用Redux和Mobx的例子。
当你的利用须要繁多的起源时
以后端的利用通过接口获取数据，且这个数据源就是从这个接口获取的，这个时候应用Redux 能够更不便的治理咱们的state，就像是写一个todo/undo demo，间接能够应用Redux。
当你须要一个更可预测的状态
当你的利用运行在不同的环境中时，应用Redux能够使得state的治理变得更稳固。同样的state和action传到reducer的时候，会返回雷同的后果。并且redux不会带来副作用，只有action会使其更改状态。
当状态晋升到顶部组件
当须要在顶部组件解决所有的状态的时候，这时候应用Redux 是更好的抉择。
React useReducer 教程总结
到这里 useReducer 的应用场景和用法例子解说都曾经介绍实现了，最初咱们回顾一下，首先类比于redux的reducer，useReducer 的思路和redux一样，不同点是在于useReducer 最终操作的对象是state。在应用上，就拿最简略的button组件为例子，点击的时候触发dispatch，依据type批改state。简单一点的，能够联合useContext应用，满足多个组件共享state的状况。 总之，在把握用法之后，多在我的项目中实际，learn by doing ，是较为无效的把握常识的形式。
其实如果你基本不想解决简单的 React 前端问题，齐全能够应用卡拉云来搭建前端工具，卡拉云内置多种罕用组件，无需懂任何前端，仅需拖拽即可疾速生成。
上面是用卡拉云搭建的数据库 CURD 后盾管理系统，只需拖拽组件，即可在10分钟内实现搭建。
可间接分享给共事一起应用： https://my.kalacloud.com/apps/8z9z3yf9fy/published
卡拉云可帮你疾速搭建企业外部工具，下图为应用卡拉云搭建的外部广告投放监测零碎，无需懂前端，仅需拖拽组件，10 分钟搞定。你也能够疾速搭建一套属于你的后盾管理工具。
卡拉云是新一代低代码开发平台，与前端框架 Vue、React等相比，卡拉云的劣势在于不必首先搭建开发环境，间接注册即可开始应用。开发者齐全不必解决任何前端问题，只需简略拖拽，即可疾速生成所需组件，可一键接入常见数据库及 API，依据疏导简略几步买通前后端，数周的开发工夫，缩短至 1 小时。立刻收费试用卡拉云。
扩大浏览：
- React Router 6 教程
- React 表格教程
- React 后盾评测