Для уменьшения дублирования кода и создания модуля с классом для работы с API в React приложении вы можете использовать библиотеку axios для выполнения HTTP запросов. Вот пример как это можно сделать:

Создайте файл api.js, где будет содержаться класс для работы с API:import axios from 'axios';
const API_URL = 'https://api.example.com';
class Api {
static async fetchData(endpoint) {
try {
const response = await axios.get(`${API_URL}/${endpoint}`);
return response.data;
} catch (error) {
console.error(error);
return null;
}
}
}
export default Api;В каждом компоненте, где вам нужно получить данные с API, импортируйте класс Api и используйте его метод fetchData:import React, { useEffect, useState } from 'react';
import Api from './api';
const MyComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const result = await Api.fetchData('exampleEndpoint');
setData(result);
};
fetchData();
}, []);
return (
<div>
{data ? (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
) : (
<p>Loading...</p>
)}
</div>
);
};
export default MyComponent;

Это позволит вам избежать дублирования кода запросов к API в каждом компоненте и использовать единый класс для работы с API. Также рекомендуется разделить логику работы с данными от отображения компонентов для лучшей читаемости и поддерживаемости кода.