什么是 useReducer？

useReducer 是一个用于管理组件状态的 Hook。它与 Redux 中的 reducer 非常相似，但是它是为 React 组件设计的。与 useState 相比，useReducer 更适合管理复杂的状态逻辑，或者当下一个状态依赖于之前的状态时。

基本结构

useReducer 接受两个参数：一个 reducer 函数和一个初始状态。它返回一个包含当前状态和一个 dispatch 函数的数组。

const [state, dispatch] = useReducer(reducer, initialState);

如何定义一个 reducer？

reducer 是一个纯函数，它接受当前的状态和一个 action，然后返回新的状态。

function reducer(state, action) {switch (action.type) {case 'ACTION_TYPE':// 返回新的状态default:return state;}
}

示例：计数器

让我们通过一个计数器示例来看看 useReducer 的基本用法。

import React, { useReducer } from 'react';const initialState = { count: 0 };function reducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:throw new Error();}
}function Counter() {const [state, dispatch] = useReducer(reducer, initialState);return (<>Count: {state.count}<button onClick={() => dispatch({ type: 'decrement' })}>-</button><button onClick={() => dispatch({ type: 'increment' })}>+</button></>);
}

使用 action payload

除了 action 类型外，我们还可以传递额外的数据到 action 中。这被称为 action payload。

function reducer(state, action) {switch (action.type) {case 'add':return { count: state.count + action.payload };default:return state;}
}// 使用
dispatch({ type: 'add', payload: 5 });

使用中间件

与 Redux 类似，我们也可以在 useReducer 中使用中间件。例如，我们可以使用中间件来记录每个 action 和新的状态。

function logger(reducer) {return (state, action) => {console.log('dispatching', action);const nextState = reducer(state, action);console.log('next state', nextState);return nextState;};
}const [state, dispatch] = useReducer(logger(reducer), initialState);

总结

useReducer 提供了一种更加结构化和可扩展的方式来管理组件状态。它特别适合于那些有复杂状态逻辑的组件。