Здравствуйте, я Тушар, веб-разработчик полного цикла, страстно увлеченный созданием красивых и функциональных веб-приложений. У меня есть опыт работы с различными технологиями, от интерфейсных фреймворков, таких как React, до внутренних языков, таких как Node.js. Мне нравится решать сложные проблемы и превращать их в элегантные решения, и я считаю, что хороший код облегчает жизнь следующему разработчику. Я рад поделиться своими мыслями, опытом и знаниями с сообществом, и я надеюсь, что вы найдете мой блог информативным и полезным.
Пользовательские хуки — это способ извлечения и повторного использования логики в компонентах React. Они позволяют разработчикам писать логику, которую можно использовать в нескольких компонентах, и упрощают поддержку и масштабирование приложений. В этом блоге мы более подробно рассмотрим пользовательские хуки и то, как их можно использовать в React.
Предоставленный код представляет собой настраиваемый хук с именем useFetchWithAuth. Этот хук отвечает за создание HTTP-запросов с заголовками аутентификации и возврат данных ответа вместе со статусом загрузки. Хук использует хук useState для управления состоянием данных ответа и статусом загрузки.
Функция request является основной логикой хука. Он делает запрос к указанному URL-адресу, используя библиотеку axios, и устанавливает статус загрузки в true перед запросом и в false после завершения запроса. Если запрос выполнен успешно, устанавливаются данные ответа и отображается сообщение об успешном выполнении с использованием библиотеки всплывающих уведомлений. В случае сбоя запроса отображается сообщение об ошибке с использованием библиотеки тостов.
В функции request axios принимает заголовки с помощью функции authHeaders, которая возвращает заголовок Authorization с Bearer и token из локального хранилища.
Теперь, когда вы поняли логику хука useFetchWithAuth, пришло время его реализовать.
Предоставленный код является реализацией пользовательского хука useFetchWithAuth. Ловушка вызывается путем деструктурирования возвращаемых значений в переменные request, isLoading и data.
Затем хук useEffect используется для выполнения запроса GET к URL-адресу '/tasks?limit=6&sortBy=createdAt_desc'. Хук useEffect срабатывает каждый раз, когда изменяется значение TaskChange. Это позволяет компоненту повторно отображать и делать новый запрос всякий раз, когда значение TaskChange изменяется, в моем случае вы можете соответствующим образом установить массив зависимостей.
Затем функция request из хука useFetchWithAuth вызывается внутри хука useEffect для выполнения запроса GET. Функция request принимает четыре параметра: URL-адрес запроса, тип запроса (в данном случае «получить»), данные, которые должны быть отправлены вместе с запросом, и сообщение об успешном выполнении, которое будет отображаться в случае успешного выполнения запроса.
Наконец, оператор return внутри хука useEffect используется для очистки подписки. Это гарантирует, что хук useEffect не сработает после размонтирования компонента, что может предотвратить утечку памяти и повысить общую производительность приложения.
Вот пример кода для выполнения POST-запроса с использованием хука useFetchWithAuth:
Затем определяется функция submitHandler, которая отправляет POST-запрос к URL-адресу «/tasks» при срабатывании. Функция request из хука useFetchWithAuth вызывается с URL-адресом, типом запроса, данными для отправки и сообщением об успешном завершении в качестве параметров.
После выполнения запроса значение description сбрасывается, а значение TaskChange переключается, чтобы инициировать повторную визуализацию компонента.
Вывод:
В заключение, пользовательские хуки — это мощный способ извлечения и повторного использования логики в компонентах React, а хук useFetchWithAuth служит примером того, как этого можно достичь. Используя настраиваемые хуки, разработчики могут уменьшить дублирование кода, улучшить его читаемость и упростить обслуживание и масштабирование своих приложений.
Я надеюсь, что эта статья помогла вам лучше понять пользовательские хуки в React и то, как хук useFetchWithAuth можно использовать для вызовов API. Если у вас есть какие-либо вопросы или комментарии, не стесняйтесь обращаться ко мне через findtushar.me
Кроме того, если вы хотите увидеть больше моих работ или следить за моими проектами, вы можете найти меня на GitHub по адресу github.com/Tushar-Chavan14. Я постоянно работаю над новыми проектами и экспериментирую с новыми технологиями, так что следите за обновлениями, чтобы не пропустить более захватывающий контент.
