// 使用useReducer 管理復(fù)雜的state
const dataFetchReducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_INIT':
      return {
        ...state,
        isLoading: true,
        isError: false
      };
    case 'FETCH_SUCCESS':
      return {
        ...state,
        isLoading: false,
        isError: false,
        data: action.payload,
      };
    case 'FETCH_FAILURE':
      return {
        ...state,
        isLoading: false,
        isError: true,
      };
    default:
      throw new Error();
  }
};
// 自定義數(shù)據(jù)請求hook
const useDataApi = (initialUrl, initialData) => {
  const [url, setUrl] = useState(initialUrl);
  // useReducer的第二個參數(shù)為state的初始值
  const [state, dispatch] = useReducer(dataFetchReducer, {
    isLoading: false,
    isError: false,
    data: initialData,
  });

  useEffect(() => {
    let didCancel = false;
    const fetchData = async () => {
      // 設(shè)置state為初始值
      dispatch({ type: 'FETCH_INIT' });

      try {
        const result = await axios(url);

        if (!didCancel) {
          // 數(shù)據(jù)請求成功，變更state值
          dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
        }
      } catch (error) {
        if (!didCancel) {
          // 數(shù)據(jù)請求失敗，變更state值，state變更的值已在reducer中定義
          dispatch({ type: 'FETCH_FAILURE' });
        }
      }
    };

    fetchData();
    // 組件卸載時停止數(shù)據(jù)請求
    return () => {
      didCancel = true;
    };
  // 查詢字符串變化時重新請求數(shù)據(jù)
  }, [url]);

  return [state, setUrl];
};
// 在組件中使用自定義hook,state綁定數(shù)據(jù)展示視圖，查詢觸發(fā)setUrl
const [state, setUrl] = useDataApi(initialUrl, initialData)

參考自：https://www.robinwieruch.de/react-hooks-fetch-data/