// 使用useReducer 管理复杂的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();
}
};
// 自定义数据请求hook
const useDataApi = (initialUrl, initialData) => {
const [url, setUrl] = useState(initialUrl);
// useReducer的第二个参数为state的初始值
const [state, dispatch] = useReducer(dataFetchReducer, {
isLoading: false,
isError: false,
data: initialData,
});
useEffect(() => {
let didCancel = false;
const fetchData = async () => {
// 设置state为初始值
dispatch({ type: 'FETCH_INIT' });
try {
const result = await axios(url);
if (!didCancel) {
// 数据请求成功，变更state值
dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
}
} catch (error) {
if (!didCancel) {
// 数据请求失败，变更state值，state变更的值已在reducer中定义
dispatch({ type: 'FETCH_FAILURE' });
}
}
};
fetchData();
// 组件卸载时停止数据请求
return () => {
didCancel = true;
};
// 查询字符串变化时重新请求数据
}, [url]);
return [state, setUrl];
};
// 在组件中使用自定义hook,state绑定数据展示视图，查询触发setUrl
const [state, setUrl] = useDataApi(initialUrl, initialData)
参考自：https://www.robinwieruch.de/react-hooks-fetch-data/
数据请求-基于reducer自定义hook
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- mmaction2 部署 这里先在windows上部署测试conda create -n mmaction2 --...
- 什么是otter 附上官方介绍，感兴趣的可以去学习。原文地址：项目介绍 otter与canal otter与can...
- R语言常用基础函数：使用edit函数调用数据编辑器手动自定义编辑数据对象不改变原始数据对象内容、使用fix函数调用...
- 一般来说券商APP已经提供了非常丰富的图表和数据，但是架不住新手各种天马行空的想像，以及对于可以寻找到圣杯的迷之自...
- 前言# 之前已经简单介绍了系统的内置注解，我们已经对注解有了一个初步的印象，接下来就来看看如何自定义注解。 此文章...
