本文将聚焦于useReducer这个钩子函数的原理和用法，笔者带领大家再一次深入认识useReducer。
import XXX from Mobx;import XXX from Redux;// orimport XXX from Recoil;
▐ 关于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' })
const initFunc = (initialCount) => {if (initialCount !== 0) {initialCount=+0}return {count: initialCount};}// wherever our useReducer is locatedconst [state, dispatch] = useReducer(reducer, initialCount, initFunc);
▐ dispatch函数
// 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>
<Increment count={state.count} handleIncrement={() => dispatch({type: 'increment'})}/>在子组件中，接收props，触发的时候，则有：
<button onClick={handleIncrement}>Increment</button>▐ 不触发dispatch
▐ 用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。
在开发项目的时候，随着我们工程的体积不断的变大，其中的状态管理会越来越复杂，此时我们最好使用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><inputtype='text'placeholder='username'value={username}onChange={(e) => setUsername(e.currentTarget.value)}/><inputtype='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><inputtype='text'placeholder='username'value={username}onChange={(e) =>dispatch({type: 'field',fieldName: 'username',payload: e.currentTarget.value,})}/><inputtype='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 的赋值会直接帮助我们解决所有的问题。
▐ 其他例子
最小化的范式
且看下面最简单的例子：
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其实可以定义很多，选择合适的数量即可。
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></>);};
在文本框组件中使用
前面的两个例子都是通过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值。
结合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的状态。
订阅的需要
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 updatedconst 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 是可以帮助我们管理复杂的state , 但是我们也不应该忽略redux在某些情况下可能是更好的选择。
最开始我们的想法是我们尽量避免使用第三方的state管理工具，当你有疑惑是否要使用他们时，说明这不是用他们的时候。
下面笔者列举几个使用Redux和Mobx的例子。
▐ 当你的应用需要单一的来源时
当前端的应用通过接口获取数据，且这个数据源就是从这个接口获取的，这个时候使用Redux 可以更方便的管理我们的state，就像是写一个todo/undo demo，直接可以使用Redux。
▐ 当你需要一个更可预测的状态
当你的应用运行在不同的环境中时，使用Redux可以使得state的管理变得更稳定。同样的state和action传到reducer的时候，会返回相同的结果。并且redux不会带来副作用，只有action会使其更改状态。
▐ 当状态提升到顶部组件
当需要在顶部组件处理所有的状态的时候，这时候使用Redux 是更好的选择。
到这里useReducer 的使用姿势和用法例子讲解都已经介绍完成了，最后我们回顾一下，首先类比于redux的reducer，useReducer 的思路和redux一样，不同点是在于useReducer 最终操作的对象是state。在使用上，就拿最简单的button组件为例子，点击的时候触发dispatch，根据type修改state。复杂一点的，可以结合useContext使用，满足多个组件共享state的情况。
总之，在掌握用法之后，多在项目中实践，learn by doing ， 是较为有效的掌握知识的方式。
本文分享自微信公众号 - 大淘宝技术（AlibabaMTT）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。