So strukturieren Sie Ihre TypeScript + React + Redux-App

Der Leitfaden zu einer einfachen, aussagekräftigeren React + Redux-App

Das Problem

Beim Erstellen einer React + Redux-App haben Entwickler (einschließlich meiner) häufig das Gefühl, dass sie viel Code-Splitting und Abstraktion durchführen müssen, um die Redundanz in ihrem Code zu minimieren. Normalerweise optimieren sie zu früh und fügen Komplexitäten hinzu, die die Verwaltung der App erschweren. Die Strukturierung einer React + Redux-App kann im Allgemeinen eine große Herausforderung sein. Wenn Sie TypeScript in den Mix einbinden, können Sie leicht viel Zeit und Energie für die Überoptimierung verschwenden.

Eine Lösung

Ich möchte Ihnen meine einfache Struktur und Gesamtarchitektur vorstellen, die mit jeder App-Größe gut funktioniert. Ich benutze dies seit Beginn in einer Produktions-App von mir und jetzt bis zu 20K + Codezeilen. Es gibt einige Optimierungen, die man für eine noch größere App vornehmen kann, aber ich wollte nur meinen einfachen Elm-basierten Ansatz vorstellen.

Ordnerstruktur

Hier ist die Hauptordnerstruktur der App.

Beachten Sie, dass ich nur vier Dateien im Zusammenhang mit Redux habe. Das ist richtig. Mein gesamtes Status- und Aktionsmanagement ist in nur vier Dateien enthalten, und ich verwende nur einen Reduzierer.

types.ts

Unsere Typendatei sollte definieren, wie unsere Anwendungsdaten und Aktionen aussehen sollen. Es ist wichtig zu beachten, dass wir in dieser Datei absolut kein Laufzeit-Javascript setzen sollten. Dies ist eine sehr aussagekräftige und definitive Möglichkeit, hier in einer Datei auf alle Datenmodelle für die gesamte App zuzugreifen. Vertrauen Sie mir, es ist sehr praktisch.

Ich habe ein einfaches Beispiel skizziert, in dem Benutzer von einer externen API geladen und in unserem Redux-Speicher gespeichert werden, indem separate Anforderungs-, Erfolgs- und Fehleraktionen verwendet werden. Es gibt mehr Details darüber, warum dies getan wird, wenn wir zum Untersetzungsgetriebe gelangen. Die ganze Idee ist, dass wir herausfinden können, wie alles in unserem einzelnen Redux-Geschäft aussehen und sich in unserer Anwendung ändern sollte.

actions.ts

Unsere Aktionsdatei erledigt einfach einen Job, um unsere Aktionstypen auf Laufzeit-Javascript abzubilden. Möglicherweise halten Sie es für etwas überflüssig, den Aktionstyp zu definieren und dann in die Aktionsdatei zu wechseln, um eine neue Aktion hinzuzufügen. Mit zunehmender Größe Ihrer Anwendung wird es jedoch bequemer und einfacher, zu sehen, wie all diese Komponenten zusammenarbeiten.

Wenn Sie die Typen von der Laufzeit-Javascript-Datei trennen, bleibt die Typendatei die einzig wahre Quelle für Ihre gesamte Anwendung.

reducer.ts

Unsere Reduzierungsdatei enthält nur unsere einzige Redux-Reduzierungsfunktion. Es sind keine kombinierten Reduzierungen oder Reduzierungen erforderlich. Ein einziger großer Reduzierer, obwohl massiv, hält alle Zustandsänderungen an einem Ort. Dies ist sehr praktisch, da jede Aktion einen beliebigen Teil des Zustands ändern kann und alles an einem Ort ist.

Angenommen, Sie haben zwei Untersetzungsgetriebe, eines für Autos und eines für Benutzer. Wenn Sie diese Daten verbinden müssen, müssen Sie am Ende die eine Aktion in beiden Reduzierungen ausführen. Weitere Informationen zu dieser Diskussion im offiziellen Redux-Beitrag über mehrere Reduzierungen finden Sie hier: https://redux.js.org/recipes/structuring-reducers/using-combinereducers.

Ich aktualisiere lieber nur an einem Ort. Es ist aussagekräftiger und später einfacher, mit Änderungen umzugehen, da das Refactoring in Redux schnell zum Albtraum werden kann.

Beachten Sie, dass ich immer hier verwende, um Statusänderungen im Reduzierer zu behandeln. Immer gibt Ihnen einfach einen unveränderlichen Entwurf, den Sie direkt ändern können, und gibt den neuen Status zurück. Sie finden es hier: https://github.com/immerjs/immer.

effects.ts

Unsere Effektdatei ist nur relevant, wenn Ihre Anwendung asynchrone Aktionen ausführen muss, z. B. um mit einer externen API oder Ähnlichem zu kommunizieren. Als Beispiel verwenden wir Redux-Thunk, um Aktionen asynchron an unseren Reduzierer zu senden.

Die Aufgabe der Effektdatei besteht darin, unsere externen API-Aufrufe mit unseren Redux-Aktionen zu verbinden, um sicherzustellen, dass die Daten korrekt und in der richtigen Reihenfolge übertragen werden.

Alles zusammen

Jetzt müssen wir nur noch unseren Redux-Shop mit unseren React-Komponenten verbinden! Ich habe auch ein Beispiel beigefügt, wie Sie die redux-devtools-Erweiterung verwenden können. Die Erweiterung finden Sie hier: https://github.com/zalmoxisus/redux-devtools-extension.

Das Befolgen dieser Struktur stellt sicher, dass Ihre Anwendung über TypeScript vollständig typsicher ist und eine einzige Quelle der Wahrheit für Ihren Status und Ihre Datenform darstellt. All dies führt zu weniger Fehlern, höherer Produktivität und einer insgesamt besseren React + Redux + TypeScript-App!

Vielen Dank fürs Lesen und viel Erfolg bei Ihren Projekten! Hinterlassen Sie einen Kommentar oder eine Nachricht an mich, wenn Sie Fragen haben.