// 使用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/
數(shù)據(jù)請求-基于reducer自定義hook
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
推薦閱讀更多精彩內(nèi)容
- mmaction2 部署 這里先在windows上部署測試conda create -n mmaction2 --...
- 什么是otter 附上官方介紹,感興趣的可以去學(xué)習(xí)。原文地址:項目介紹 otter與canal otter與can...
- R語言常用基礎(chǔ)函數(shù):使用edit函數(shù)調(diào)用數(shù)據(jù)編輯器手動自定義編輯數(shù)據(jù)對象不改變原始數(shù)據(jù)對象內(nèi)容、使用fix函數(shù)調(diào)用...
- 一般來說券商APP已經(jīng)提供了非常豐富的圖表和數(shù)據(jù),但是架不住新手各種天馬行空的想像,以及對于可以尋找到圣杯的迷之自...
- 前言# 之前已經(jīng)簡單介紹了系統(tǒng)的內(nèi)置注解,我們已經(jīng)對注解有了一個初步的印象,接下來就來看看如何自定義注解。 此文章...