Użycie niestandardowych Hooks w React okazało się genialnym podejściem do abstrahowania powtarzającej się logiki i poprawy czytelności oraz utrzywalności twoich komponentów. W tym samouczku dowiesz się na przykładzie „useJsonFetch”, jak możesz tworzyć własne hooki tworząc, które są przeznaczone specjalnie do pobierania danych JSON z serwera. Chodźmy więc bezpośrednio do sedna.
Najważniejsze wnioski
- Niestandardowe hooki to proste funkcje, które korzystają z hooków React.
- Pozwalają na ponowne użycie logiki w wielu komponentach.
- Niestandardowy hook może zarządzać wieloma stanami, takimi jak loading, data i error.
- Struktura i implementacja niestandardowego hooka są proste i przejrzyste.
Instrukcja krok po kroku tworzenia hooka useJsonFetch
Podstawowe rozważania
Zanim zaczniesz pisać swój własny hook, ważne jest zdefiniowanie funkcjonalności, której potrzebujesz. W tym przypadku chcesz stworzyć hooka, który pobiera dane JSON z serwera. Nazwiemy nasz hook „useJsonFetch”. Aby zrozumieć, jak zaimplementować ten hook, najpierw przyjrzyj się jak użyć useJsonFetch w komponencie.
Wywołujesz hooka przekazując URL, z którego chcesz pobrać dane JSON. Hook będzie odpowiedzialny za pobranie danych oraz obsługę stanów ładowania i błędów.
Implementacja useJsonFetch
Aby zaimplementować niestandardowego hooka, utwórz nowy plik, który zaczyna się od „use”, aby odpowiadać konwencjom Reacta. Nazwa pliku będzie więc useJsonFetch.js.
W tym pliku tworzysz funkcję, która przyjmuje URL jako parametr. W funkcji definiujesz stany dla danych, błędu i ładowania.
Tutaj dane na początku są undefined, błąd również i ładowanie zaczyna się od true, aby oznaczyć stan ładowania. Wynika to z tego, jak JavaScript obsługuje operacje asynchroniczne.
Wykorzystanie useEffect
Wewnątrz hooka używasz useEffect, aby rozpocząć proces pobierania, gdy komponent jest montowany. Upewnij się, że aktualizujesz stan ładowania zgodnie z tym.
Z await najpierw wywołujesz URL za pomocą fetch. Ponieważ fetch zwraca Promise, możesz zaczekać na odpowiedź za pomocą await. Po odebraniu odpowiedzi przekształcasz dane za pomocą.json() w obiekt JavaScript.
Jeśli wystąpi błąd, łapiesz go za pomocą try-catch i ustawiasz błąd. Niezależnie od tego, czy żądanie zakończyło się sukcesem, czy wystąpił błąd, upewnij się, że ustawiasz ładowanie na false, gdy odpowiedź dotrze.
Zwracanie hooka
Na końcu zwracasz stany danych, błędu i ładowania jako obiekt, aby były one dostępne dla komponenty wywołującej.
Użycie hooka w komponencie
Teraz, gdy stworzyłeś swój hook, możesz go użyć w swoim komponencie. Importuj useJsonFetch do swojego komponentu i użyj destrukturyzacji, aby uzyskać te wartości.
Następnie możesz zaimplementować wskaźnik ładowania, sprawdzając ładowanie, i wyświetlić dane, które pobrano, gdy są dostępne.
Dzięki użyciu useJsonFetch możesz zachować logiczne oddzielenie między pobieraniem danych a logiką interfejsu użytkownika, co znacznie poprawia utrzymanie twoich komponentów.
Podsumowanie dotyczące tworzenia niestandardowych hooków
Tworzenie niestandardowych hooków jest procesem prostym, ale skutecznym, który pomaga w organizacji twojego kodu. Możesz spakować logikę do ponownego użycia i zaimplementować ją w każdej komponencie, która potrzebuje tej samej funkcjonalności. Dzięki użyciu niestandardowych hooków możesz również oddzielić żądanie sieciowe i reakcję na stany ładowania lub błędu od prezentacji danych.
Podsumowanie
Z własnym hookiem, jak useJsonFetch, uczysz się, jak zarządzać asynchronicznymi żądaniami danych w React. Poprawia to znacznie możliwości ponownego używania i strukturę twojego kodu. Widziałeś, jak możesz zbudować prostą strukturę do pobierania danych JSON i skutecznie zarządzać różnymi stanami.
