React中useReducer介绍

useReducer 是React提供的一个Hooks函数，用于管理组件的状态。与useState不同，useReducer更适用于复杂的状态逻辑，可以帮助我们更好地组织和处理状态的更新。

useReducer 接受两个参数: reducer 函数和初始状态。reducer函数接受两个参数: 当前状态和一个表示要执行的操作的action对象，根据action的类型来更新状态，并返回新的状态。初始状态可以是任何类型的数据，如基本类型、对象、数组等。

下面是一个简单的示例，演示如何使用 useReducer

import { useReducer } from 'react'

// 1. 根据不同的action返回不同的新状态
function reducer(state, action) {
  console.log('reducer执行了')
  switch (action.type) {
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    case 'UPDATE':
      return state + action.payload
    default:
      return state
  }
}

function App() {
  // 2. 使用useReducer分派action
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <>
      {/* 3. 调用dispatch函数传入action对象 触发reducer函数，分派action操作，使用新状态更新视图 */}
      <button onClick={() => dispatch({ type: 'DEC' })}>-</button>
      {state}
      <button onClick={() => dispatch({ type: 'INC' })}>+</button>
      <button onClick={() => dispatch({ type: 'UPDATE', payload: 100 })}>
        update to 100
      </button>
    </>
  )
}

export default App