Die Schwierigkeiten bei der Arbeit mit Redux und deren Lösung

Redux unter uns

Dies ist einer der beliebtesten Staatsmanager .

Es ist einfach zu bedienen, transparent und vorhersehbar. Damit können Sie die Speicherung und Änderung von Daten organisieren. Und wenn wir annehmen, dass Aktionen und Reduzierer Teil von Reduxa sind, können wir ohne Übertreibung sagen, dass er der Inhaber der gesamten Logik des Themenbereichs (auch bekannt als Geschäftslogik) unserer Anwendungen ist.

Ist alles so rosig?

Bei aller Einfachheit und Transparenz hat die Verwendung von Redux eine Reihe von Nachteilen ...

Die Daten im Zustand " Redux" liegen in einem einfachen Javascript- Objekt und können auf die übliche Weise abgerufen werden, Sie müssen nur den Pfad kennen .

Aber wie organisieren wir diese Daten? Es gibt nur zwei Optionen: eine flache Liste und ein hierarchisches Modell .

Eine flache Liste ist eine großartige Option für eine Anwendung, in der es beispielsweise nur einen Zähler gibt ... Für etwas Ernsthafteres benötigen wir eine hierarchische Struktur. Darüber hinaus verfügt jede Datenebene über weniger Kenntnisse als die vorherige. Alles ist logisch und verständlich, aber der Pfad zu den Daten wird zusammengesetzt .



Das Vorhandensein einer hierarchischen Datenstruktur und das Fehlen eines modularen Ansatzes für diese Daten führt dazu, dass an jedem Ort, an dem diese Daten verwendet werden, der vollständige Pfad zu diesen Daten bekannt sein muss. Mit anderen Worten, dies schafft eine Kohäsion der Datenspeicherstruktur und ihrer Anzeigestrukturen und führt zu Schwierigkeiten mit dem Pfadrefaktor und / oder der Reorganisation der Datenstruktur.




Eine weitere Herausforderung ist das Testen. Ja, es gibt einen separaten Artikel in der Dokumentation zum Redux- Testen, aber jetzt geht es nicht mehr darum, einzelne Artefakte wie Reducer und Action-Creater zu testen .

Daten, Aktionen und Reduzierer sind normalerweise miteinander verbunden. Ein Baum logisch zusammengehöriger Daten wird häufig von mehreren Reduzierern bereitgestellt , die auch zusammen getestet werden müssen.

Fügen Sie dieser Liste Selektoren hinzu , deren Ergebnisse insbesondere von der Arbeit der Reduzierer abhängen ...

Im Allgemeinen können Sie all dies testen, müssen sich jedoch mit einer Reihe von Artefakten befassen, die nur durch Logik und Konventionen miteinander verbunden sind.

Und was wäre, wenn wir eine Struktur entwickeln würden, zum Beispiel mit Benutzerdaten, einschließlich Freundeslisten, Lieblingsliedern und etwas anderem, sowie der Funktionalität, diese durch Aktionsreduzierer zu ändern . Vielleicht haben wir sogar eine Reihe von Tests für all diese Funktionen geschrieben. Und jetzt im nächsten Projekt brauchen wir das Gleiche ...

Wie kann man billig codieren?

Suche nach einer Lösung

Um herauszufinden, wie Sie die Vorteile von Redux erhalten und die beschriebenen Nachteile beseitigen können , müssen Sie verstehen, worauf es im Datenlebenszyklus ankommt:

• Aktionsberichte , benutzerdefinierte und mehr
• Reduzierer reagieren auf Aktionen und ändern oder ändern den Datenstatus nicht
• Datenänderung ist ein Ereignis für sich und kann dazu führen, dass sich andere Daten ändern.

Controller ist in diesem Fall eine Abstraktion, die sowohl Benutzeraktionen als auch Datenänderungen im Speicher verarbeitet . Er muss überhaupt keine separate Klasse sein, in der Regel ist er nach Komponenten verteilt.

Kombiniere den gesamten Redux- Zoo in einer Blackbox

Aber was ist, wenn wir die Aktionen , Reduzierer und Selektoren in einem Modul zusammenfassen und ihm beibringen, nicht vom spezifischen Pfad für den Speicherort seiner Daten abhängig zu sein?

Was passiert, wenn beispielsweise alle Benutzeraktionen durch Aufrufen der Instanzmethode user.addFriend (friendId) festgeschrieben werden ? Und die Daten werden über getter abgerufen: user.getFriendsCount () ?

Was ist, wenn wir alle Funktionen des Benutzers mit einfachem Import importieren können ?

 const userModule from 'node_modules/user-module'; 

Ist es bequem? Vor allem, wenn man bedenkt, dass man dafür keinen zusätzlichen Code schreiben muss:
Das npm Redux-Modul-Creator- Paket bietet alle Funktionen zum Erstellen lose gekoppelter, wiederverwendbarer und getesteter Redux- Module .

Jedes Modul besteht aus einer Steuerung , einem Reduzierstück und einer Aktion und verfügt über die folgenden Funktionen:

• wird durch einen Aufruf der Integrator-Methode in den Speicher integriert. Um den Ort der Integration zu ändern, müssen Sie nur den Ort des Aufrufs des Integrators und seine Parameter ändern
  
  
  
• Der Controller hat eine Verbindung mit seinem Teil der Daten im Speicher und merkt sich den Pfad, der einmal an integrator () übergeben wird. Dadurch entfällt die Notwendigkeit, dies bei der Verwendung von Daten zu wissen.
  
  
  
• Der Controller ist der Inhaber aller erforderlichen Selektoren, Adapter usw.
• Um Änderungen zu verfolgen, können Sie Änderungen an Ihren eigenen Daten abonnieren
• Reducer`s können den Aufrufkontext - eine Instanz des Moduls - verwenden und daraus ActionType`s abrufen, die zum Modul gehören. Dadurch entfällt die Notwendigkeit, eine Reihe von Aktionen zu importieren, und die Wahrscheinlichkeit eines Fehlers wird verringert.
• Aktionen erhalten den Verwendungskontext, da sie Teil der Modulinstanz werden : Jetzt ist es nicht nur trainingFinished , sondern readModule.actions.trainingFinished
• Aktionen sind jetzt im Modul-Namespace vorhanden, sodass Sie Ereignisse mit demselben Namen für verschiedene Module erstellen können
• Jedes Modul kann mehrmals instanziiert werden, und jede Instanz ist in verschiedene Teile des Geschäfts integriert
• Aktionen für verschiedene Modulinstanzen haben unterschiedliche Aktionstypen - Sie können auf Ereignisse einer bestimmten Instanz reagieren

Als Ergebnis erhalten wir eine Black Box, die ihre Daten selbst verwalten kann und über Handles für die Kommunikation mit externem Code verfügt.

Gleichzeitig ist es der gleiche Redux mit seinem unidirektionalen Datenstrom, seiner Transparenz und seiner Vorhersagbarkeit.

Und da dies alle derselbe Redux und die gleichen Reduzierer sind , können Sie daraus jede Struktur erstellen, die die Anwendungsdomänenlogik erfordert.