Как организуешь архитектуру загрузки и отображения данных по клику на кнопку

Использую подход с разделением ответственностей: 1. Компонент кнопки - только UI, вызывает колбэк при клике 2. Сервис/хук для работы с API - инкапсулирует логику запросов 3. Состояние (Redux/Context/useState) - хранит данные и статус загрузки Пример с React хуками: ```jsx function DataLoader() { const [data, setData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const fetchData = async () => { try { setLoading(true); const response = await api.get('/data'); setData(response.data); } catch (err) { setError(err.message); } finally { setLoading(false); } }; return ( ); } ``` Ключевые моменты: - Обработка состояний загрузки и ошибок - Разделение логики и представления - Оптимистичный UI (дизейбл кнопки при загрузке)