Блог

У меня есть следующий код:

 const { data, error, isLoading, fetchData } = useHttp('news');
 

Я вызываю этот крючок, когда хочу получить данные с HTTP-сервера.

Вот как выглядит крючок:

 export const useHttp = (url: string) => {
    const [state, dispatch] = useReducer(fetchReducer, initialState);

    const fetchData = async (cancelRequest: boolean = false) => {
        if (!url) return;

        dispatch({ type: 'API_REQUEST'});
        try {
            const response = await axios(url);
            if (cancelRequest) return;
            dispatch({ type: 'API_SUCCESS', payload: response.data });
        } catch (e) {
            dispatch({ type: 'API_ERROR', payload: e.message });
        }
    };

    useEffect(() => {
        let cancelRequest = false;

        fetchData(cancelRequest);

        return () => {
            cancelRequest = true;
        }

    }, [url]);

    return { ...state, fetchData}
};
 

если я использую этот крючок в своем компоненте списка статей, я хочу , чтобы typescript знал, что я извлекаю IArticle[] , и когда я использую крючок в своем компоненте updateProfile, я хочу, чтобы typescript читал data как profileUpdateResponse .

• Как я могу управлять типом ответа с помощью пользовательского HTTP-хука, чтобы сделать мой пользовательский хук более настраиваемым?
• Есть ли лучшая практика для этого случая использования?