Verbessern Sie Ihre Statusverwaltung in React: Warum Ihnen Zustand dabei hilft, den Status wie ein Profi gegenüber Redux zu verwalten?

Rabah Ali Shah

Folgen

Hören

Aktie

Die Verwaltung von Zuständen ist einer der anspruchsvollsten Teile beim Erstellen einer Anwendung, der sich jeder Entwickler stellen muss. Zweifellos kann dieses Problem durch die Verwendung einiger React Hooks gelöst werden, aber die Statusverwaltung kann in größeren Apps immer komplexer werden. In solchen Fällen können wir uns nicht einfach auf sehr gängige React-Hooks wie useState und useReducer usw. verlassen. Denn jede Bibliothek bietet eine Lösung für ein bestimmtes Problem. Im Fall von React und für eine komplexere Anweisungsverwaltung führte Dan Abramov eine Bibliothek namens Redux ein.

Redux verfügt über ein erstaunliches Konzept eines zentralen Speichers, der unabhängig in Ihrer React-App verfügbar ist. Dieses Konzept hilft einem Entwickler, sich keine Sorgen darüber zu machen, den aktuellen Status einer Komponente abzurufen oder sie zu manipulieren. Alles, was Sie tun müssen, ist, den Store in den Anbieter auf der obersten Ebene Ihrer React-App und die Importfunktionen einzuschließen, indem Sie einige Redux-Hooks in Komponenten verwenden, in denen Sie den aktuellen Status lesen oder bearbeiten möchten.

Redux Store erstellen:

Auf diese Weise erstellen Sie einen Redux-Speicher, der Anfangszustände, Reduzierungsfunktionen oder Aktionen enthält, die wir auf unsere Zustände ausführen möchten, um deren aktuelle Zustände zu aktualisieren. In diesem Fall enthält dieser Speicher tatsächlich die gesamte Logik für einen einfachen Zähler, der Werte addiert oder subtrahiert, indem man auf die Schaltfläche „Erhöhen“ bzw. „Verringern“ klickt.

Sobald wir unseren Shop erstellt haben, ist es nun an der Zeit, ihn mit unserer React-Komponente zu verknüpfen:

Zusätzlich zu unserer App in der Datei index.js stellen wir der App einen Redux-Store zur Verfügung. Mit einfachen Worten: Wir deklarieren unseren Store auf der obersten Ebene unserer React-App, sodass sein Status für alle untergeordneten Elemente verfügbar ist.

Gehen wir nun zu der Datei, in der wir unseren Redux Store verwenden möchten:

Sie benötigen den Hook „useSelector“, um die Daten aus dem Redux-Store abzurufen. Mithilfe des Hooks „useDispatch“ können Sie dann die Aktion aufrufen, um Ihren Status zu aktualisieren.

So verwalten Sie Zustände in Redux.

Das Problem, das Ihnen vielleicht aufgefallen ist, ist der lange Textbaustein von Redux. Selbst um solch einfache Logiken zu verwalten, müssen Sie alle oben genannten Redux-Boilerplates einrichten. Und manchmal ist es schwierig zu verstehen, was mit Redux vor sich geht, denn zum Abrufen der Daten benötigen Sie einen zusätzlichen useSelector-Hook und zum Aufrufen Ihrer Aktion benötigen Sie den useDispatch-Hook. Was in größeren Apps, bei denen die Zustandsverwaltung viel komplexer ist, sehr hektisch wird.

Die Lösung für dieses Problem ist Zustand. Dies ist eine kleine, schnelle und skalierbare React-Zustandsverwaltungslösung, die vereinfachte Flux-Prinzipien verwendet. Zustand verfügt über das gleiche Konzept eines zentralen Speichers, der Ihren Zustand verwaltet und in Ihrer gesamten App verfügbar ist.

Das Beste an Zustand ist, dass Sie im Gegensatz zu Redux kein langes Boilerplate einrichten und keine zusätzlichen Hooks verwenden müssen, um Zustände zu lesen, aufzurufen und zu manipulieren. Sie müssen lediglich einen Store erstellen und ihn einfach überall in Ihrer React-App verwenden. Es ist nicht erforderlich, den Anbieter auf der obersten Ebene der App einzuschließen.

Creating Zustand Store:

Sehen Sie, wie einfach es ist, ein Geschäft in Zustand zu erstellen. Einfach mit der Erstellungsfunktion. Sobald Sie Ihren Shop mit Zustand erstellt haben. Es ist an der Zeit, es mit Ihrer Komponente zu verknüpfen, an der Sie Daten aus Ihrem Geschäft lesen möchten.

So nennen Sie Ihre Reduktionsfunktionen, sogenannte Aktionen. Importieren Sie einfach Ihre Aktion und rufen Sie sie auf. Das ist es! KEINE Notwendigkeit zusätzlicher Hooks zum Lesen und Versenden von Aktionen. Einfach importieren und nutzen.

Ich hoffe, nachdem Sie den gesamten oben genannten Code, die Einfachheit von Zustand und seinen Vergleich mit Redux gesehen haben, haben Sie Ihre Antwort gefunden, aber im Folgenden sind noch einige Vorteile aufgeführt, die Sie bei der Verwendung von Zustand erhalten werden.

Die Verwaltung von Zuständen kann in komplexeren und größeren Anwendungen eine Herausforderung darstellen. Zweifellos sind Redux und Hooks wie useContext und useReducer hier, um uns zu helfen. Das Problem ist jedoch die lange und komplexe Standardkonfiguration, die Redux bei der Statusverwaltung weniger benutzerfreundlich macht.

Hier kommt Zustand, eine kleine, schnelle und skalierbare Zustandsverwaltungslösung für React-Apps. Seine Einfachheit, der geringere Einrichtungsaufwand und das benutzerfreundliche Zustandsverwaltungsverhalten machen es günstiger als Redux. Fühlen Sie sich frei, Zustand in Ihrer Produktion zu verwenden und genießen Sie die Schönheit der sauberen und einfachen Verwaltung von Zuständen.

Zweifellos ist Redux sehr beliebt und wurde in der Produktion häufiger als Zustand verwendet. Wenn Sie jedoch nach einer Lösung zum Verwalten von Zuständen wie Redux suchen, jedoch mit weniger Standardeinstellungen und einer einfacheren Zustandsverwaltungslösung, wäre Zustand die beste Wahl. Dies ist der Grund, warum Zustand bei Entwicklern immer beliebter wird und sie es gerne verwenden. Muss man unbedingt ausprobieren.

Vielen Dank, dass Sie bis hierher gelesen haben. Ich hoffe, Sie finden diesen Artikel informativ und hilfreich. Wenn ja, dann teile es mit deinen Freunden. Wenn Sie über aktuelle Technologien und Branchentrends auf dem Laufenden bleiben möchten, folgen Sie mir auf X/Twitter und vernetzen Sie sich mit mir auf LinkedIn. Ich veröffentliche viele informative und lehrreiche Inhalte zum Thema Programmierung und neueste Technologien.