用于数据获取的自定义钩子

Question

我已经制作了这个自定义钩子来使用 fetcher 获取数据并返回带有数据的状态以显示在 antd 表中（喜欢它们）。 我不确定这是使用钩子的正确方法，我已经在我有疑问的代码中添加了 cmets。

import { useEffect, useReducer } from 'react';
import { useLocation, useHistory } from 'react-router-dom';
import queryString from 'query-string'

const initialState = { data: [], loading: true };

const fetchData = (fetcher, params, dispatch) => {

    //in this case i need to change my state to loading, the reducer will do the trick, but i fill this kinda triky, should i call the fatcher after the dispatch end using an effect?

    dispatch({ type: 'FETCHING' })
    fetcher({ ...params, page: params.page > 0 ? params.page - 1 : params.page }, response => dispatch({ type: 'DATA_RECEIVED', payload: response.data }));
    return () => {
        console.log('unmounting useGridDataFetch')
    };
}

const handlePageChange = (page, history, location) => {
    const qparams = queryString.parse(location.search)
    const qs = Object.keys(qparams).map(key => key != 'page' ? `&${key}=${qparams[key]}` : '')
    history.push(`${history.location.pathname}?page=${page}${qs.reduce((acc,val)=> acc + val , '')}`)
}


const useGridDataFetch = (fetcher, initialParams) => {
    const location = useLocation()
    const history = useHistory()
    const params = { ...initialParams, ...queryString.parse(location.search) }

    // to use history and location inside my reducer to change the querystring on page change, i had to put the reducer definition inside the body of the hook, is there a better way?

    const reducer = (state, action) => {
        switch (action.type) {
            case 'FETCHING':
                return { loading: true };
            case 'DATA_RECEIVED':
                const pagination = {
                    pageSize: action.payload.pageable.pageSize,
                    current: action.payload.pageable.pageNumber + 1,
                    total: action.payload.totalElements,
                    onChange: page => handlePageChange(page, history, location)
                }
                return { dataSource: action.payload.content, loading: false, pagination };
            default:
                throw new Error();
        }
    }

    const [state, dispatch] = useReducer(reducer, initialState);
    useEffect(() => fetchData(fetcher, params, dispatch), [location.search])

    return [state, (_params) => fetchData(fetcher, { ...params, ..._params }, dispatch)]
}


export default useGridDataFetch

一般来说，您可以给我的每一个改进我的代码的提示都会很感激。

谢谢。

Answer 1

我会尽力帮助你

首先你必须从钩子中提取reducer。 reducer 函数应该独立于钩子， 因为useReducer(reducer, initialState); 只使用这两个参数reducer 和initialState 一次，并且不会在每次下次调用时更新它。因此你不能在 reducer 中使用handlePageChange 方法。

第二点是你的 reducer 必须返回具有相同接口的数据，如{ data: Array, isLoading: Boolean }。在您的情况下，reducer 有 3 种不同的响应：init 之后 - { data: Array, loading: Boolean }，FETCHING 之后 - { loading: Boolean }，DATA_RECEIVED 之后 - { dataSource: Object, loading: Boolean, pagination: Object }

我建议你不要使用 useReducer。我将建议我实现您的代码

const useGridDataFetch = (fetcher, initialParams) => {
  const { data, isLoading } = useGetData(fetcher, initialParams);
  const { dataSource, pagination } = useGetPreparedData(data);
  
  return {
    isLoading,
    dataSource,
    pagination,
  }
}

const useGetData = (fetcher, initialParams) => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState({});

  const location = useLocation();

  useEffect(() => {
    const params = {
      ...initialParams,
      ...queryString.parse(location.search)
    }
    setIsLoading(true);
    fetcher({
      ...params,
      page: params.page > 0 ? params.page - 1 : params.page
    }, response => {
      setData(response.data);
      setIsLoading(false);
    });
  }, [location.search]);

  return {
    isLoading,
    data
  }
}

const useGetPreparedData = (data) => {
  const location = useLocation();
  const history = useHistory();

  const handlePageChange = useCallback((page) => {
    const qparams = queryString.parse(location.search);
    const qs = Object.keys(qparams).map(key => key != 'page' ? `&${key}=${qparams[key]}` : '')
    history.push(`${location.pathname}?page=${page}${qs.reduce((acc,val)=> acc + val , '')}`)
  }, [location.pathname, location.search, history]);

  return useMemo(() => {
    if (!data.content) {
      return {
        dataSource: [],
        pagination: {}
      }
    }

    const pagination = {
      pageSize: data.pageable.pageSize,
      current: data.pageable.pageNumber + 1,
      total: data.totalElements,
      onChange: page => handlePageChange(page)
    }

    return {
      dataSource: data.content,
      pagination
    };
  }, [data, handlePageChange])
}

我可能对这段代码有一些错误，但我认为主要思想很简单