封装table查询hook

table查询hook

/**
 * @param {function} apiFun table查询接口 
 * @param {object} initSearch 初始化查询参数 
 */
const useDataApi = (apiFun, initSearch={}) => {}

想法
table的数据和状态(table的数据和状态太多，抽取成一个reducer)
分页的状态
查询的状态
分页状态修改的方法
查询状态修改的方法
请求参数的状态，将请求参数抽取出来，useEffect只需要监听接口方法和请求参数的变化

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

const FETCH_INIT = 'FETCH_INIT';  // 请求初始化
const FETCH_SUCCESS = 'FETCH_SUCCESS';  // 请求成功
const FETCH_FAILED = 'FETCH_FAILED'; // 请求失败

// 分页初始化配置
const initPagination = {
  current: 1,
  pageSize: 10,
  pageSizeOptions: ["3", "10", "20", "30"],
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0
}


// table初始化数据和状态
const initState = {
  loading: false,
  error: false,
  data: [],
  total: 0
};




function reducer(state, action) {
  switch (action.type) {
    case FETCH_INIT:
      return {
        ...state,
        loading: true,
        error: false
      };
    case FETCH_SUCCESS:
      return {
        data: action.payload,
        total: action.total,
        loading: false,
        error: false
      };
    case FETCH_FAILED:
      return {
        data: [],
        total: 0,
        loading: false,
        error: true
      };
    default:
      return state;
  }
}

const useDataApi = (apiFun, initSearch={}) => {
  // 列表数据和状态
  const [state, dispatch] = useReducer(reducer, initState);
  // 搜索框
  const [search, setSearch] = useState(initSearch);
  // 分页
  const [pagination, setPagination] = useState(initPagination);
  // 查询参数
  const [query, setQuery] = useState({
    ...initSearch,
    current: initPagination.current,
    size: initPagination.pageSize
  })

  useEffect(() => {
    let didCancel = false;
    const fetchData = async () => {
      dispatch({
        type: FETCH_INIT
      })
      try {
        const res = await apiFun(query);
        if (!didCancel) {
          dispatch({
            type: FETCH_SUCCESS,
            payload: res.content.list,
            total: res.content.totalCount
          })
        }
      } catch (error) {
        if (!didCancel) {
          dispatch({
            type: FETCH_FAILED
          })
        }
      }
    };

    fetchData();

    return () => {
      didCancel = true;
    }
  }, [apiFun, query]);


  // 分页调整
  const changePagination = (pagi = initPagination) => {
    setPagination(pagi);
    setQuery({
      ...search,
      current: pagi.current,
      size: pagi.pageSize
    })
  }

  // search
  const changeSearch = useCallback((searchObj) => {
    setSearch(searchObj);
    setPagination(initPagination);
    setQuery({
      ...searchObj,
      current: initPagination.current,
      size: initPagination.pageSize
    });
  }, [])

  return {
    state,
    search,
    pagination: {
      ...pagination,
      total: state.total
    },
    changeSearch,
    changePagination
  }
}