【React】useReducer
让 React 管理多个相对关联的状态数据
import { useReducer } from "react"
// 1. 定义reducer函数，根据不同的action返回不同的状态
function reducer(state, action) {
switch (action.type) {
case 'ADD':
return state + action.payload
case 'SUB':
return state - 1
default:
return state
}
}
function App() {
// 2. 组件中调用 useReducer， 0 是初始化参数
const [state, dispatch] = useReducer(reducer, 0)
return (
<div className="App">
{state}
{/* 3. 调用dispatch 产生一个新的状态，匹配事件（可传参） 更新 UI */}
<button onClick={() => { dispatch({ type: 'ADD', payload:100 }) }}>+</button>
<button onClick={() => { dispatch({ type: 'SUB' }) }}>-</button>
</div>
)
}
export default App;