Verwaltung globaler Daten in einer React-Applikation : Redux VS Context API
Unter den zahlreichen JavaScript-Frameworks, die im Webentwicklungs-Ökosystem verfügbar sind, gehört React zu den heute am häufigsten verwendeten Lösungen: sie hat zum Ziel, die Entwicklung visueller Schnittstellen durch ihre Philosophie der Verwendung unabhängiger und wiederverwendbarer Komponenten zu vereinfachen.
Jede Komponente ist vom Rest der Anwendung isoliert und verwendet zwei Arten von Daten:
die props, Informationen, die von seiner übergeordneten Komponente an die Komponente übergeben werden
die state, Informationen, die lokal von der Komponente verwaltet werden
1. Problematik des prop-drilling
Wenn eine React-Anwendung komplexer wird, ist es üblich, Fälle zu sehen, in denen ein Entwickler props an eine Komponente übergibt, nur damit diese sie an ihre untergeordneten Komponenten weiterleitet.
Dieser Fall stellt in der Regel kein Problem dar, wenn es darum geht, eine prop zwischen 2 oder 3 Komponentenebenen.
Es kommt jedoch in bestimmten Fällen vor, dass die Information über mehr als 5 verschiedene Ebenen in der Komponentenstruktur weitergegeben wird (zum Beispiel die Verwaltung von Authentifizierungsdaten).
Man nennt diese Problematik den prop-drilling, das heisst, es werden Daten über eine grosse Anzahl von Komponenten hinweg weitergegeben, obwohl nur eine Minderheit die übermittelten Informationen verwendet. Um dieses Problem zu beheben, ist eine der am häufigsten verwendeten Lösungen die Implementierung eines globalen state, von Informationen, die für die gesamte Anwendung zugänglich sind. Dies kann mit Lösungen wie Redux oder die Context API von React.
2. Redux & Context API
Redux
Redux ist eine externe Bibliothek zu React, die sich auf die Datenverwaltung in JavaScript-Anwendungen konzentriert. Es ist wichtig zu beachten, dass Redux auch mit anderen Webanwendungen, die ohne React erstellt wurden, verwendet werden kann, aber sie wird regelmässig mit diesem Framework assoziiert.
Redux stellt einen store zur Verfügung, ein JavaScript-Objekt, das die verschiedenen global gespeicherten Informationen enthält. Die Bibliothek react-redux stellt anschliessend zwei sehr praktische hooks zur Verfügung, useSelector und useDispatch, die es uns ermöglichen, die global gespeicherten Daten abzurufen, aber auch Aktionen auszulösen, die es ermöglichen, dies zu ändern state global.
Diese 2 Abhängigkeiten müssen installiert werden, um Redux in einer React-Anwendung nutzen zu können.
Einrichtung des Redux storelanguage=js import { createStore } from "redux"; import { Provider } from "react-redux"; import { render } from "react-dom"; import reducer from "./reducer"; const store = createStore(reducer); const App = () => ( <Provider store={store}> <Page /> </Provider> ); render(<App />, document.getElementById("root"));
Dieser erste Teil des Codes ermöglicht die Einrichtung des store von Redux zur Verfügung gestellten store. Er entspricht dem Objekt, das die "globalen" Daten enthält, die vom Rest der Anwendung geteilt werden.
Diese Funktion entspricht dem reducer verwendet von Redux. In dieser Funktion definieren wir die globalen Daten und die verschiedenen actions die es ermöglichen, die globalen Daten des store.
Ein reducer erhält 2 Parameter, den state globalen, aktuell in Redux gespeicherten (wo wir den state initialen) und anschliessend die actions die vom reducer. Eine action entspricht einer "Anfrage" zur Änderung des state globalen, sie wird durch ein JavaScript-Objekt dargestellt, das mindestens einen Schlüssel "type" enthält.
Die type der action enthält eine eindeutige Zeichenkette, die verwendet wird, um zu identifizieren, welche Daten im store von Redux geändert werden sollen.
Im obigen Codeausschnitt verwenden wir einen switch der es ermöglicht, das Verhalten des reducer je nach type der action zu wechseln.
Abrufen der globalen Daten und Ändern der Datenlanguage=js import React from "react"; import { useSelector, useDispatch } from "react-redux"; export default function DeeplyNestedComponent() { const globalState = useSelector((state) => state); const dispatch = useDispatch(); return (
{globalState.isLogged ? ( ) : ( )}
); }
Durch die Verwendung der hooks useSelector und useDispatch, können wir die global gespeicherten Informationen abrufen und die Anzeige der Authentifizierungs-Buttons dynamisch ändern. Indem wir eine "action dispatchen", ermöglicht uns dies (in unserem Beispiel), uns an- oder abzumelden.
useSelector : Hook, der es ermöglicht, die global gespeicherten Daten von jeder beliebigen Komponente abzurufen
useDispatch : Hook, der es ermöglicht, eine Funktion "dispatch" abzurufen, die es ermöglicht, actions (in Form von Objekten) zu senden, welche vom reducer oben eingerichtet wurde
Sie können mit Redux noch weiter gehen, indem Sie die verfügbare Dokumentation auf ihrer Website.
Context API
Offiziell im März 2018 eingeführt, ermöglicht die Context API von React, Informationen in einem "Kontext" zu speichern. Der Kontext stellt einen provider (eine React-Komponente) zur Verfügung, der es allen Kindkomponenten ermöglicht, auf die im Kontext gespeicherten Informationen zuzugreifen. Ihre Nutzung wurde insbesondere durch die Einführung des hooks useContext vereinfacht, der nativ in React verfügbar ist.
Wie Redux stellt die Context API einen providerzur Verfügung, die Komponente, die für die Weitergabe der global gespeicherten Informationen zuständig ist. Im Gegensatz zur Idee der dispatch und actions von Redux, übermitteln wir hier über den Kontext einen state und einen setState. In diesem Rahmen können wir die global gespeicherten Informationen einfach abrufen und ändern, als ob wir dies in einer lokalen Komponente täten. Die Context API schränkt den Typ der übertragbaren Informationen nicht ein. Sie können sehr wohl einen Wert (eine Zeichenkette, eine Zahl, ein Datum, …) oder ein Objekt oder ein Array von Elementen bereitstellen.
Einrichtung des Kontextslanguage=js import React from "react"; import { AuthProvider } from "./contexts/auth-context"; import AppRouter from "./navigation/app-router"; export default function App() { return (
); }
Wie im Falle von Redux platzieren wir den provider an der Wurzel der Anwendung, damit die Informationen überall verfügbar sind. Es ist interessant festzuhalten, dass diese Entscheidung rein willkürlich ist: der store von Redux wird im Allgemeinen immer an der Wurzel der Anwendung platziert, während ein Kontext sehr wohl tiefer in der Komponentenstruktur der Anwendung positioniert werden kann, man könnte ihn zum Beispiel auf einen bestimmten Bildschirm anwenden.
Abrufen und Ändern der globalen Kontextdatenlanguage=js import React, { useContext } from "react"; import { AuthContext } from "./context"; function AuthButtons() { const [authState, setAuthState] = useContext(AuthContext); return (
{authState.isLogged ? ( ) : ( )}
); } export default AuthButtons;
Die Verwendung des hooks useContext ermöglicht uns das Abrufen unseres authState und unseres setAuthState die wir im Parameter "value" unseres provider.
Redux und die Context API sind zwei praktikable Lösungen, um ein state global. Wir werden nun die positiven und negativen Aspekte jeder Lösung auflisten, um Ihnen die Auswahl der besten Option zu ermöglichen.
Redux
Vorteile :
Architektur der Verantwortlichkeiten (reducers, actions, …) gut definiert und konstant
Browser-Erweiterungen wie "Redux DevTools" sind verfügbar und ermöglichen ein einfaches Debugging der Redux-Integration in einem React-Projekt
Nachteile :
Schwierig zu adaptieren, wenn man mit React beginnt
Externe Bibliothek zu React: Die beiden erforderlichen Packages (redux & react-redux) stellen zusätzliche Daten dar, die für den Endbenutzer heruntergeladen werden müssen
Context API
Vorteile :
Native Lösung zur React-Bibliothek, sie ist verfügbar, sobald eine neue React-Anwendung gestartet wird
Sehr einfache Handhabung
Es ist möglich, "lokalere" Kontexte zu integrieren, das heisst solche, die nicht die gesamte Anwendung umfassen, sondern eher eine geringe Anzahl von Komponenten: Dies ermöglicht die Segmentierung der Anwendungslogik
Nachteile :
Die Context API ist nicht für häufige Änderungen von state (zum Beispiel für den Wert eines Textfeldes)
Alle Komponenten, die den Kontext konsumieren, werden re-render bei jeder Änderung des vom Kontext bereitgestellten globalen Zustands, auch wenn die von ihnen genutzten Informationen nicht geändert werden
Fazit
Redux ist eine Bibliothek, die seit 2015 verwendet wird und in einer sehr grossen Anzahl von React-Anwendungen in Produktion eingesetzt wird. Sie wurde mehrfach getestet und genehmigt und bleibt eine besonders interessante Option, wenn eine React-Anwendung an Umfang gewinnt und eine beträchtliche Codebasis aufweist.
Wenn Sie jedoch schnell und auf vereinfachte Weise einige globale Daten integrieren möchten, scheint die Context API Ihren Erwartungen entsprechen zu können. Sie ist direkt in React integriert.
Keine dieser beiden Optionen ist vorherrschend. Abhängig vom Umfang Ihres Projekts und der von Ihnen gewünschten Implementierung ermöglicht Ihnen eine dieser 2 Lösungen, die globalen Daten Ihrer Anwendung zu verwalten.
Um tiefer einzutauchen, schlage ich Ihnen die folgenden Links vor, die zusätzliche Informationen bieten, die Ihre Wahl genauer lenken könnten:
Bleiben Sie auf dem Laufenden über unsere Neuigkeiten, entdecken Sie konkrete KI-Anwendungsfälle in Unternehmen und verfolgen Sie die neuesten Modellentwicklungen.
Ein Fehler ist aufgetreten, bitte versuchen Sie es erneut.
✓ 1 Mal pro Monat
Galadrim Newsletter
Danke, das ist notiert!
Ihre Anmeldung ist bestätigt. Bis bald in Ihrem Posteingang!
