假设我们的fetch请求包含以下三个状态:isLoading(是否正在加载),error(加载过程中发生的错误)和data(加载成功后返回的数据)。
我们可以使用useSelector自定义hooks从redux store中获取这些状态:
import { useSelector } from 'react-redux';
const useFetchData = () => {
const isLoading = useSelector(state => state.fetch.isLoading);
const error = useSelector(state => state.fetch.error);
const data = useSelector(state => state.fetch.data);
return { isLoading, error, data };
};
在我们的函数组件中,我们可以轻松地调用useFetchData并获取我们需要的状态:
import React from 'react';
import { useDispatch } from 'react-redux';
import { fetchData } from './actions';
import useFetchData from './useFetchData';
const MyComponent = () => {
const { isLoading, error, data } = useFetchData();
const dispatch = useDispatch();
const handleClick = () => {
dispatch(fetchData());
};
if (isLoading) {
return Loading...;
}
if (error) {
return {error.message};
}
return (
{data.map(item => (
{item.name}
))}
);
};
export default MyComponent;
这里我们将isLoading,error和data分别从useFetchData自定义hook中拆分出来,使我们可以更清楚地了解我们需要的每个状态。
在MyComponent函数组件中,我们添加了一个按钮,用于手动获取数据。当isLoading为true时,显示“正在加载”,当error存在时,显示错误消息,否则将渲染数据列表。
这是一种简单而有效的方式,可以使用hooks从redux store中正确获取fetching状态。