Wie ich im Redux Store jede Menge Code durch Just ersetzt habe – ohne die App zu beschädigen!

Ich habe bei Entwicklern, die mit Redux-Stores arbeiten, ein gemeinsames Muster beobachtet: Wenn sie mit neuen, aber leicht unterschiedlichen Anforderungen konfrontiert werden, erstellen sie oft neue Funktionen und schreiben den generischen Boilerplate-Code neu. einschließlich Reduzierer, Thunks, Aktionen und Middleware. Dies kann zu erheblichen Wiederholungen in der gesamten Codebasis führen.

Wir können den Entwicklern dafür nicht die volle Schuld geben, da Standardisierung und Team-Best Practices in der Regel von Teamleitern durchgeführt werden....

Wenn jedoch APIs oder Microservices standardisiert werden – wobei Endpunkte wie Löschen, Erstellen, Einfügen und Abrufen einer vorhersehbaren Struktur folgen – ist es möglich, Funktionen höherer Ordnung zu erstellen, die Redux-Reduzierer und -Aktionen dynamisch generieren können. Dies reduziert die Redundanz und fördert eine skalierbarere Architektur. Hier ist ein Beispiel, wie dies umgesetzt werden kann:

https://gist.github.com/ARaldhafeeri/1ad10710bee110b9a88013984272fbbd

Es sind 200 Zeilen Code, mit einem Beispiel für die Verwendung hier ist, was es tut:

1. Dynamische Redux-Slice-Erstellung: Die Funktion createEntitySlice generiert ein Redux-Slice für eine Entität (wie Reservierungen oder Benutzer), sodass Entwickler mit minimalem Boilerplate-Code problemlos Daten für jede Entität erstellen, lesen, aktualisieren und löschen können.
2. Anpassbare Parameter: Die Funktion akzeptiert anpassbare Parameter wie „entityName“, „endpoints“, „extraReducers“, „extraThunks“ und „extraActions“ und ermöglicht so Flexibilität für verschiedene Entitäten und spezifische Anforderungen.
3. Basis-CRUD-Thunks: Es stellt grundlegende asynchrone Thunks für allgemeine Vorgänge wie Abrufen, Erstellen, Aktualisieren, Löschen und Suchen bereit, die basierend auf den bereitgestellten Endpunkten mit einer API interagieren. Diese Thunks verwalten die notwendigen API-Aufrufe und behandeln Fehler.
4. Reduzierer für die Statusverwaltung: Der Slice enthält Reduzierer für die Verwaltung des Ladestatus, das Speichern abgerufener Daten, die Behandlung von Fehlern und das Ausführen von Aktionen wie Suchen und Zurücksetzen des Status.
5. Middleware-Integration: Der Code integriert Listener-Middleware, um Nebenwirkungen wie die Anzeige von Erfolgs- oder Fehlermeldungen basierend auf dem Ergebnis von CRUD-Vorgängen zu bewältigen. Es erweitert die Middleware außerdem um die Möglichkeit, das Verhalten von Zustandsänderungen anzupassen, z. B. das Auslösen zusätzlicher Aktionen, wenn bestimmte Bedingungen erfüllt sind.
6. Optimierte Code-Wiederverwendbarkeit: Durch die Verwendung dieses Funktionsansatzes höherer Ordnung können Entwickler sich wiederholenden Boilerplate-Code vermeiden und wiederverwendbare, dynamische Slices für verschiedene Entitäten erstellen, ohne jedes Mal Aktionen und Reduzierungen manuell schreiben zu müssen.
7. Erweiterbar und modular: Die Funktion höherer Ordnung erzeugt die benötigte Funktionalität aus einem Redux-Store für eine Funktion. Außerdem können wir alles darin erweitern, von Reduzierern bis zum Anfangszustand. Wenn also ein benutzerdefinierter Endpunkt eintrifft, ist dies nicht der Fall vollständig in die generischen Basen, die wir erstellt haben, können wir es einfach hinzufügen.

Beste,

Ahmed,

Das obige ist der detaillierte Inhalt vonWie ich im Redux Store jede Menge Code durch Just ersetzt habe – ohne die App zu beschädigen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!