Get best of the week

Redux Toolkit wird nicht mehr benötigt?

Das Problem der großen Menge an Boilerplate-Code bei der Verwendung von Redux ist jedem bekannt, jeder löst es so gut er kann. Und wir haben bei verschiedenen Projekten verschiedene Krücken und Fahrräder verwendet, ohne die Hoffnung zu verlieren, etwas Standardisiertes und Bequemes zu finden. Vor etwas mehr als einem Jahr verzweifelten wir an unserer Suche und nahmen die Lösung des Problems ernst. Was daraus wurde, wird unten beschrieben.

Erscheinungsgeschichte


Unser Unternehmen entwickelt Projekte für Startups auf der ganzen Welt. Und für diese verrückt inspirierten Typen ist die Zeit die wichtigste (oder eine davon). Zuvor in den Markt eingetreten - höhere Überlebenschancen. Daher versuchen wir immer, die Entwicklungszeit zu verkürzen, ohne die Qualität zu beeinträchtigen, und die Anzahl der Fehler zu verringern, die durch den menschlichen Faktor verursacht werden. Zum größten Teil wählen wir etwas Standardisches und mehr oder weniger Stabiles. In diesem Fall konnte nichts Fertiges gefunden werden, also krempelten sie die Ärmel hoch und begannen zu sehen, was hier gefahren werden konnte.



Wie üblich haben wir mit einer Beschreibung des Problems begonnen und Folgendes erhalten:

  • Jeder Entwickler hat seinen eigenen subtilen Akzent beim Schreiben von Code. Es ist schwierig, die Umsetzung des Konzepts des „depersonalisierten Codes“ zu erreichen.
  • Viel Code (Boilerplate, Copy-Paste und alle sich daraus ergebenden Probleme), mehr als 100 Zeilen auf CRUD;
  • Es wird viel Zeit damit verbracht, grundlegende Dinge zu schreiben. Sie werden eines vergessen, das andere: Laden einstellen, Fehler behandeln usw.;
  • Die Struktur des Geschäfts unterscheidet sich von Projekt zu Projekt und manchmal zwischen verschiedenen Teilen des Projekts.

Eine richtig gestellte Frage oder ein formuliertes Problem ist die halbe Lösung. Nach einigem Überlegen haben wir die Regeln für die Bildung des Geschäfts eingeführt, seine Struktur beschrieben und beschlossen, den Code umzugestalten und zu kämmen. Trotz der Tatsache, dass unsere Codebasis nicht unglaublich groß war, stießen wir sofort auf die Menge an Code, die geändert werden muss.

Während PMs sich Gedanken darüber machten, wo sie noch ein paar Stunden am Tag verbringen könnten, gab es einige Enthusiasten, die eine einfache Idee bis zur Banalität entwickelten und umsetzten. Ja, geniale Ideen scheinen immer einfach zu sein, nachdem sie aufgetaucht sind. Und die Idee war folgende: Generieren Sie einfach separate Codeteile, anstatt sie manuell neu zu schreiben. Ich wollte keine Schnipsel verwenden und am Ausgang Blätter bekommen, weil Alle Änderungen führten zu einer Katastrophe und wiederholtem Refactoring. So wurde schnell eine Funktion abgesägt, die einige Parameter als Eingabe verwendete und Reduzierer, Action und Saga baute. So wurde die erste Version der Kommunikation geboren ( @ axmit / redux-communications) Der Name "Kommunikation" wurde irgendwie von selbst geboren, weil Diese Bibliothek verbindet die Sagen und Komponenten. Und so ging es weiter ...

Unmittelbar danach kam das Glück. Na ja, oder fast sofort. Die Entwicklungszeit verringerte sich um etwa 20% (wie wir es berechnet haben - das Thema eines separaten Artikels). Erstens aufgrund einer signifikanten Reduzierung der Anzahl der Crawler. Und das ist nicht zu erwähnen, dass Entwickler viel seltener dumme Fehler durch Unaufmerksamkeit machen.



Linus Torvalds hat einmal gesagt: „Geschwätz ist wertlos. Zeig mir den Code. “Und ich stimme ihm vollkommen zu. Ich werde das Dock nicht zitieren oder umschreiben oder die Codeblätter hier geben.Ich werde nur ein kleines Beispiel geben. Links zu einer vollständigen Beschreibung der Bibliothek und einer Sandbox mit Beispielen finden Sie ebenfalls am Ende des Artikels.

Stellen Sie sich eine typische Aufgabe vor - wir müssen CRUD für eine Entität erstellen. Nehmen Sie zum Beispiel die Aufgabe. Ich halte es für nutzlos, die Standardversion als zu beschreiben Es wird viel Platz in Anspruch nehmen, und jeder, der auf den Editor gestoßen ist, wird sich wahrscheinlich grob vorstellen, wie es aussehen wird. Und um Kommunikation zu erhalten, müssen Sie die folgenden Dinge tun:

1. Beschreiben Sie den Transport, ohne ihn irgendwo

const basePath = `/api/task`;

const taskTransport = {
   add: task => axios.post(`basePath`, task).then(r => r.data),
   get: id => axios.get(`${basePath}/${id}`).then(r => r.data),
   update: task => axios.put(`${basePath}/${task.id}`, task).then(r => r.data),
   delete: id => axios.delete(`${basePath}/${id}`, task),
   getCollection: () => axios.get(basePath).then(r => r.data)
};

2. Beschreiben Sie den Namensnamensraum
const namespace = 'task';

3. Erstellen Sie eine Strategie zum Erstellen von Kommunikation
const strategy = new CRUDStrategy({
   namespace,
   transport: taskTransport
});

4. Kommunikation erstellen
const taskCommunication = buildCommunication(strategy);

5. Verbinden Sie Reduzierer und Sagen wie gewohnt mit der Kommunikation
taskCommunication.reducers
taskCommunication.sagas

6. Danach bleibt die Seite mit der Komponente zu verbinden
taskCommunication.injector(MyComponent)

7. Und starten Sie mit
componentDidMount() {
   const { getTaskCollection } = this.props;
   getTaskCollection();
}

render() {
   const { taskCollection } = this.props;
   return  taskCollection.data.map(item => <span>{item.title}</span>)
}

Tatsächlich müssen in jedem Fall sowohl der Transport als auch die Komponente erstellt werden, und der vollständige Kommunikationscode lautet wie folgt:

import { taskTransport } from './task.transport';
import { CRUDStrategy, buildCommunication, StoreBranch } from '@axmit/redux-communications';
 
const namespace = 'task';
 
const strategy = new CRUDStrategy({
   namespace,
   transport: taskTransport
});
 
export const taskCommunication = buildCommunication(strategy);


Dies ist alles, was Sie tun müssen, um eine voll funktionsfähige CRUD zu haben. Wenn Sie etwas Komplizierteres tun müssen, können Sie die CRUD-Kommunikation erweitern oder BaseCommunication verwenden. Im Extremfall sind es unter der Haube immer noch die gleichen guten, altmodischen Editoren mit all ihren Funktionen. Die Flexibilität wurde nicht beeinträchtigt. Der Transport wird in einer separaten Ebene platziert, und seine Implementierung kann beliebig sein. Wir haben graphQL in unseren Projekten und einfache Abfragen mit Axios, und wir hatten diesbezüglich keine Schwierigkeiten. Ein aufmerksamer Leser hat möglicherweise bemerkt, dass die Bibliothek Sagen exportiert, und dies ist eine der wichtigsten Einschränkungen. Wenn Sie aus irgendeinem Grund keine Sagen verwenden können, ist diese Bibliothek leider nicht für Sie geeignet.

Warum jetzt?


Die Entscheidung, einen Artikel zu schreiben, fiel nach dem Lesen dieses Artikels . Als ich dieses Tool verwendete, stellte ich überrascht fest, dass die Kommunikation viel einfacher und prägnanter ist, eine klarere Struktur des Geschäfts ergibt und gleichzeitig nicht weniger flexibel ist. Nachdem ich eine Stunde lang mit den Quellen vom Beispiel bis zum Redux-Toolkit gesessen und sortiert hatte, schrieb ich es für die Kommunikation neu. Ich habe versucht, ein Minimum an Änderungen vorzunehmen, um den Unterschied leichter nachverfolgen zu können, obwohl die Struktur des Beispiels meiner Meinung nach sehr verwirrt ist. Ich habe speziell Kommentare zum Code hinterlassen, um den Vergleich zu erleichtern, wie er war und wie er wurde. Achten Sie auf die * .communication.ts-Dateien und -Schnitte, die sie ersetzen.



Die Tatsache, dass die Anzahl der Zeilen viel kleiner ist und der Code selbst viel angenehmer (subjektiver) aussieht, ist nicht so wichtig, weil In Prod haben wir ziemlich viel Kommunikation. Es gibt noch einen wichtigen Unterschied. Der Code ist deklarativ. Wir bestimmen einfach, was und wo wir bekommen wollen und was wir mit den Daten machen sollen und wie wir es machen sollen - es ist uns überhaupt egal.
Fazit - Redux-Toolkit sollte zur Anpassung verwendet werden, für alles andere gibt es MasterCa ... @ axmit / redux-Communications .

Zusammenfassen


  • Der Code ist in allen Projekten und mit allen Entwicklern konsistent geworden. Ähnliche Probleme werden einheitlich gelöst, und Lösungen werden häufig in separaten Paketen geliefert und in Zukunft wiederverwendet. Gleichzeitig hat sich die Codemenge erheblich verringert.
  • Der Juni erhielt einen klaren und verständlichen Ablauf.
  • Senioren freuen sich, dass sie nicht jede Menge Code schreiben müssen und überlegen, wie sie die Kommunikation noch verbessern können.
  • Das Debuggen wurde vereinfacht und die Struktur des Geschäfts wurde für jeden Entwickler im Unternehmen einfach und verständlich.
  • Der Übergang zwischen Projekten oder verschiedenen Teilen des Systems verursacht keine Kopfschmerzen.
  • PMs sind auch glücklich. Die Anzahl der Fehler hat abgenommen - die Kunden sind zufrieden. Das Schreiben ist einfacher geworden - Entwickler sind glücklich. Was braucht PM noch zum Glück?
  • Sie können schrittweise zur Kommunikation übergehen oder sogar einen hybriden Ansatz (Kommunikation + Slices) verwenden.

Natürlich hat die Bibliothek auch Nachteile.

  • Ohne Beispielcode und Dokumentation ist das Verständnis ziemlich schwierig.
  • Das Ändern der Struktur des Geschäfts für eine beliebige funktioniert nicht, weil Die gesamte Automatisierung basiert auf der Struktur des Geschäfts. Es ist jedoch anzumerken, dass wir in unserer Arbeit nie Schwierigkeiten damit hatten.
  • Sie können nur mit Sagen arbeiten. Thunk passte nicht zu uns und wir verwenden immer Sagen, daher ist dies für uns kein Problem. Aber wenn Sagen aus irgendeinem Grund nicht zu Ihnen passen, können Sie die Bibliothek nicht nutzen.

Ich hoffe, dass unsere Bibliothek trotz der bestehenden Mängel für jemanden nützlich sein wird. Wenn Sie Verbesserungsvorschläge oder Fragen zu deren Verwendung haben, schreiben Sie bitte, ich werde gerne darüber diskutieren.
Wenn es coolere Analoga gibt, die wir nicht finden konnten - lassen Sie es mich wissen, wir werden sie auf jeden Fall studieren!

Eine vollständige Beschreibung der Bibliothek finden Sie hier und hier online .

Der vollständige Code des Beispiels, das für die Kommunikation von den ReduxToolkit-Docks umgeschrieben wurde, ist hier , aber Sie können ihn hier stecken .

More articles:


All Articles