數(shù)據(jù)請求-基于reducer自定義hook

// 使用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/
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容