Кастомні хуки в React: Створення хука useJsonFetch

Використання кастомних хуків в React зарекомендувало себе як геніальний підхід до абстрагування повторюваної логіки та покращення читабельності і ремонтопридатності ваших компонентів. У цьому уроці ви навчитеся створювати власні хуки спеціально для отримання JSON-даних з сервера на прикладі "useJsonFetch ". Давайте зануримося в роботу.

Основні висновки

• Кастомні хуки - це прості функції, які використовують хуки React.
• Вони дозволяють повторно використовувати логіку в різних компонентах.
• Користувацький хук може обробляти різні стани, такі як завантаження, дані та помилки.
• Структура та реалізація кастомного хука нескладна і зрозуміла.

Покрокове керівництво по створенню хука useJsonFetch

Основні міркування

Перш ніж написати власний хук, важливо визначити необхідну вам функціональність. У цьому випадку ви хочете створити хук, який отримує JSON-дані з сервера. Назвемо наш хук "useJsonFetch". Щоб зрозуміти, як реалізувати цей хук, спочатку розглянемо використання useJsonFetch у компоненті.

Ви викликаєте хук і передаєте URL-адресу, з якої ви хочете отримати JSON-дані. Хук буде відповідати за отримання даних і обробку станів завантаження і помилок.

Реалізація useJsonFetch

Щоб реалізувати кастомний хук, створіть новий файл, який починається з "use", щоб відповідати угодам React. Отже, ім'я файлу буде useJsonFetch.js.

У цьому файлі ви створюєте функцію, яка приймає URL-адресу як параметр. У функції ви визначаєте стани для даних, помилки та завантаження.

Тут дані спочатку не визначені, помилка також не визначена, а завантаження починається зі значення true для позначення статусу завантаження. Це пов'язано з тим, як JavaScript обробляє асинхронні операції.

Використання useEffect

У хуку ви використовуєте useEffect для запуску процесу вибірки, коли компонент змонтовано. Переконайтеся, що ви оновили стан завантаження відповідним чином.

За допомогою await ви спочатку викликаєте URL за допомогою fetch. Оскільки fetch повертає обіцянку, ви можете дочекатися відповіді за допомогою await. Після отримання відповіді перетворіть дані в JavaScript-об'єкт за допомогою.json().

Якщо виникла помилка, перехопіть її за допомогою try-catch і встановіть стан помилки. Незалежно від того, чи був запит успішним, чи сталася помилка, ви повинні переконатися, що ви встановили значення load в false, як тільки отримали відповідь.

Повернення хука

В кінці ви повертаєте дані про стан, помилку і завантаження у вигляді об'єкта, щоб ці значення були доступні компоненту, який викликає хук.

Використання хука у компоненті

Тепер, коли ви створили хук, ви можете використовувати його у своєму компоненті. Імпортуйте useJsonFetch у ваш компонент і використовуйте деструктуризацію для отримання значень.

Після цього ви можете реалізувати індикатор завантаження за допомогою запиту loading і відобразити отримані дані, коли вони стануть доступними.

Використовуючи useJsonFetch, ви можете підтримувати логічне розділення між отриманням даних і логікою інтерфейсу користувача, що значно покращує обслуговування ваших компонентів.

Висновок про створення користувацьких хуків

Створення користувацьких хуків - це простий, але ефективний процес, який допомагає вам організувати ваш код. Ви можете інкапсулювати багаторазову логіку і впроваджувати її в будь-який компонент, який вимагає такої ж функціональності. Використовуючи користувацькі хуки, ви також можете відокремити мережеву вибірку і реакцію на умови навантаження або помилки від представлення даних.

Підсумок

За допомогою кастомних хуків, таких як useJsonFetch, ви навчитесь керувати асинхронною вибіркою даних у React. Це значно покращує повторне використання та структуру вашого коду. Ви побачили, як можна створити просту структуру для отримання JSON-даних і ефективно керувати різними станами.