Hallo, ich bin Tushar, ein Full-Stack-Webentwickler mit einer Leidenschaft für die Erstellung schöner und funktionaler Webanwendungen. Ich habe Erfahrung mit einer Vielzahl von Technologien, von Front-End-Frameworks wie React bis hin zu Back-End-Sprachen wie Node.js. Ich liebe es, komplexe Probleme zu lösen und sie in elegante Lösungen umzuwandeln, und ich glaube, dass es bei gutem Code darum geht, das Leben des nächsten Entwicklers einfacher zu machen. Ich freue mich darauf, meine Gedanken, Erfahrungen und mein Wissen mit der Community zu teilen, und hoffe, dass Sie meinen Blog informativ und hilfreich finden.

Benutzerdefinierte Hooks sind eine Möglichkeit, Logik in React-Komponenten zu extrahieren und wiederzuverwenden. Sie ermöglichen Entwicklern das Schreiben von Logik, die von mehreren Komponenten gemeinsam genutzt werden kann, und erleichtern die Wartung und Skalierung von Anwendungen. In diesem Blog werfen wir einen genaueren Blick auf benutzerdefinierte Hooks und wie sie in React verwendet werden können.

Der bereitgestellte Code ist ein benutzerdefinierter Hook mit dem Namen useFetchWithAuth. Dieser Hook ist dafür verantwortlich, HTTP-Anfragen mit Authentifizierungsheadern zu stellen und die Antwortdaten zusammen mit dem Ladestatus zurückzugeben. Der Hook verwendet den useStateHook, um den Status der Antwortdaten und den Ladestatus zu verwalten.

Die requestFunktion ist die Hauptlogik des Hooks. Es stellt mithilfe der Axios-Bibliothek eine Anfrage an die angegebene URL und setzt den Ladestatus vor der Anfrage auf „true“ und nach Abschluss der Anfrage auf „false“. Wenn die Anfrage erfolgreich ist, werden die Antwortdaten festgelegt und mithilfe der Toastbibliothek eine Erfolgsmeldung angezeigt. Wenn die Anfrage fehlschlägt, wird mithilfe der Toastbibliothek eine Fehlermeldung angezeigt.

In der request Funktion akzeptiert Axios Header mithilfe der Funktion authHeaders, die AuthorizationHeader mit Bearerund tokenvon localstorage zurückgibt

Wenn Sie nun die Logik hinter dem useFetchWithAuth-Hook verstanden haben, ist es an der Zeit, ihn zu implementieren

Der bereitgestellte Code ist eine Implementierung des useFetchWithAuthbenutzerdefinierten Hooks. Der Hook wird aufgerufen, indem seine zurückgegebenen Werte in die Variablen request, isLoadingund destrukturiert werden data.

Der useEffectHook wird dann verwendet, um eine GET-Anfrage an die URL „/tasks?limit=6&sortBy=createdAt_desc“ zu stellen. Der useEffectHook wird jedes Mal ausgelöst, wenn sich der TaskChangeWert ändert. Dadurch kann die Komponente immer dann neu gerendert werden und eine neue Anfrage stellen, wenn sich der TaskChangeWert ändert. In meinem Fall können Sie das Abhängigkeitsarray entsprechend festlegen.

Die requestFunktion des useFetchWithAuthHooks wird dann innerhalb des Hooks aufgerufen, useEffectum die GET-Anfrage zu stellen. Die requestFunktion akzeptiert vier Parameter: die URL der Anfrage, den Typ der Anfrage (in diesem Fall „get“), die mit der Anfrage zu sendenden Daten und eine Erfolgsmeldung, die angezeigt wird, wenn die Anfrage erfolgreich ist.

Schließlich wird die returnAnweisung im useEffectHook verwendet, um das Abonnement zu bereinigen. Dadurch wird sichergestellt, dass der useEffectHook nach dem Aushängen der Komponente nicht ausgelöst wird, was Speicherlecks verhindern und die Gesamtleistung der Anwendung verbessern kann.

Hier ist das Codebeispiel zum Erstellen einer POST-Anfrage mithilfe des useFetchWithAuthHooks:

Anschließend wird eine submitHandlerFunktion definiert, die bei Auslösung eine POST-Anfrage an die URL „/tasks“ sendet. Die requestFunktion vom useFetchWithAuthHook wird mit der URL, dem Anfragetyp, den zu sendenden Daten und einer Erfolgsmeldung als Parameter aufgerufen.

Nachdem die Anforderung gestellt wurde, descriptionwird der Wert zurückgesetzt und der TaskChangeWert umgeschaltet, um ein erneutes Rendern der Komponente auszulösen.

Abschluss :

Zusammenfassend lässt sich sagen, dass benutzerdefinierte Hooks eine leistungsstarke Möglichkeit sind, Logik in React-Komponenten zu extrahieren und wiederzuverwenden, und der useFetchWithAuthHook ist ein Beispiel dafür, wie dies erreicht werden kann. Durch die Verwendung benutzerdefinierter Hooks können Entwickler die Codeduplizierung reduzieren, die Lesbarkeit des Codes verbessern und die Wartung und Skalierung ihrer Anwendungen vereinfachen.

Ich hoffe, dieser Artikel hat Ihnen ein besseres Verständnis der benutzerdefinierten Hooks in React vermittelt und erklärt, wie der useFetchWithAuthHook für API-Aufrufe verwendet werden kann. Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne über findtushar.me kontaktieren

Wenn Sie mehr von meiner Arbeit sehen oder meine Projekte verfolgen möchten, können Sie mich auf GitHub unter github.com/Tushar-Chavan14 finden . Ich arbeite ständig an neuen Projekten und experimentiere mit neuen Technologien. Seien Sie also gespannt auf weitere spannende Inhalte.