react中useReducer的使用

复制代码

// 导入React核心库及所需的类型和Hooks
// FC: FunctionComponent 函数组件类型，用于约束组件类型
// useReducer: 用于复杂状态管理的Hook，替代useState处理多状态/复杂逻辑
// useState: 基础状态管理Hook（本示例未实际使用，保留导入仅作参考）
import React, { FC, useReducer, useState } from 'react'

/**
 * 定义状态的类型接口
 * 约束useReducer中state的结构，确保类型安全
 */
type StateType = {
  // 计数数值，核心状态字段
  count: number
}

/**
 * 定义动作的类型接口
 * 约束dispatch派发的action对象结构
 */
type ActionType = {
  // 动作类型标识，用于reducer中区分不同操作
  type: string
  // 若需要传递额外数据，可扩展该接口，例如：payload?: any
}

/**
 * 初始化状态值
 * 作为useReducer的初始状态，定义count的初始值为100
 */
const initialState: StateType = { count: 100 }

/**
 * Reducer函数：纯函数，负责根据action更新状态
 * 核心原则：不可变数据，返回新的state对象而非修改原对象
 * @param state 当前状态（更新前的状态）
 * @param action 派发的动作对象，包含type标识
 * @returns 新的状态对象（必须与StateType类型匹配）
 */
function reducer(state: StateType, action: ActionType) {
  // 根据action.type区分不同的状态更新逻辑
  switch (action.type) {
    // 处理计数增加的动作
    case 'increment':
      // 返回新状态：count在原有基础上加1
      return { count: state.count + 1 }
    // 处理计数减少的动作
    case 'decrement':
      // 返回新状态：count在原有基础上减1
      return { count: state.count - 1 }
    // 处理未知动作类型，抛出错误提示
    default:
      throw new Error(`未匹配到action类型: ${action.type}`)
  }
}

/**
 * 计数组件：使用useReducer管理计数状态
 * FC类型约束：确保组件符合React函数组件的规范
 */
const CountReducer: FC = () => {
  // 使用useReducer Hook创建状态和派发动作的方法
  // 参数1: reducer函数（处理状态更新逻辑）
  // 参数2: initialState（初始状态）
  // 返回值: 
  //   state: 当前最新的状态对象（类型为StateType）
  //   dispatch: 派发动作的函数，用于触发状态更新
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    // 片段标签：无需额外DOM节点包裹子元素
    <>
      {/* 展示当前计数数值：从state中读取count */}
      <span>count:{state.count}</span>

      {/* 增加按钮：点击时派发increment类型的动作 */}
      <button 
        onClick={() => dispatch({ type: 'increment' })}
      >
        +
      </button>

      {/* 减少按钮：点击时派发decrement类型的动作 */}
      <button 
        onClick={() => dispatch({ type: 'decrement' })}
      >
        -
      </button>
    </>
  )
}

// 导出组件，供其他模块导入使用
export default CountReducer

关键注释说明：

类型定义：清晰标注StateType和ActionType的作用，约束状态和动作的结构，体现 TypeScript 的类型安全特性。
Reducer 函数：重点说明纯函数特性、不可变数据原则，以及每个 case 分支的作用。
useReducer 使用：解释 Hook 的参数和返回值，明确state（当前状态）和dispatch（动作派发函数）的含义。
UI 交互：标注按钮点击事件中dispatch的作用，说明如何通过派发不同类型的动作触发状态更新。
代码结构：注释片段标签、导出语句等细节，帮助理解 React 组件的基本结构。