使用TS 封装 自定义hooks，实现不一样的 CRUD

在TypeScript中封装自定义hooks实现不同种类的CRUD操作，可以创建一个通用的useCrud hook，然后根据不同的API接口来定制。以下是一个简单的示例：

import { useState, useEffect } from 'react';
import axios from 'axios';
 
// 定义CRUD操作的类型
type CrudAction = 'create' | 'read' | 'update' | 'delete';
 
// 定义API响应的通用格式
interface ApiResponse<T> {
  data: T;
}
 
// 定义自定义hooks的通用函数
function useCrud<T, U>(
  baseURL: string,
  action: CrudAction,
  data?: U
) {
  const [response, setResponse] = useState<T | null>(null);
  const [error, setError] = useState<Error | null>(null);
  const [isLoading, setIsLoading] = useState(false);
 
  useEffect(() => {
    const runAction = async () => {
      setIsLoading(true);
      try {
        const res = await axios<ApiResponse<T>>({
          method: action,
          url: baseURL,
          data: action !== 'read' ? data : undefined,
        });
        setResponse(res.data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    };
    runAction();
  }, [baseURL, action, data]);
 
  return { response, error, isLoading };
}
 
// 使用自定义hooks
const { response, error, isLoading } = useCrud<Item, NewItem>(
  'https://api.example.com/items',
  'create',
  { name: 'New Item', description: 'This is a new item' }
);

在这个例子中，useCrud 函数接受一个基础URL、要执行的动作（CRUD之一）和数据（如果适用）。根据传入的动作，它将执行相应的HTTP请求。使用axios库进行网络请求，并通过使用React的useState和useEffect来管理状态。

这个函数可以被多次调用，每次可以针对不同的URL和操作来定制。这种封装可以减少重复代码，并使组件更加内聚，易于维护。