【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;