React状态管理Hooks代码示范

明白！给你写一个实用且能吸引程序员的React状态管理Hooks示范。这个示范包含：

• 使用 useReducer 管理复杂状态（比单纯 useState 更强）

• 自定义Hook封装状态逻辑，方便复用

• 异步操作示范（模拟请求）

• 状态与操作分离，结构清晰

---

import React, { useReducer, useEffect, useCallback } from 'react';

// 定义状态类型
const initialState = {
  loading: false,
  error: null,
  data: null,
  count: 0,
};

// 定义动作类型
const ACTIONS = {
  FETCH_START: 'FETCH_START',
  FETCH_SUCCESS: 'FETCH_SUCCESS',
  FETCH_ERROR: 'FETCH_ERROR',
  INCREMENT: 'INCREMENT',
  DECREMENT: 'DECREMENT',
  RESET: 'RESET',
};

// reducer函数，处理状态更新
function reducer(state, action) {
  switch (action.type) {
    case ACTIONS.FETCH_START:
      return { ...state, loading: true, error: null };
    case AC