Ich werde zu Redux migrieren.
Meine Anwendung besteht aus vielen Teilen (Seiten, Komponenten), daher möchte ich viele Reduzierungen erstellen. Redux-Beispiele zeigen, dass ich combineReducers()
einen Reduzierer generieren sollte .
Soweit ich weiß, sollte die Redux-Anwendung einen Speicher haben und wird erstellt, sobald die Anwendung gestartet wird. Wenn das Geschäft erstellt wird, sollte ich meinen kombinierten Reduzierer übergeben. Dies ist sinnvoll, wenn die Anwendung nicht zu groß ist.
Aber was ist, wenn ich mehr als ein JavaScript-Bundle erstelle? Beispielsweise verfügt jede Anwendungsseite über ein eigenes Bundle. Ich denke in diesem Fall ist der eine kombinierte Reduzierer nicht gut. Ich habe die Quellen von Redux durchgesehen und eine replaceReducer()
Funktion gefunden . Es scheint das zu sein, was ich will.
Ich könnte für jedes Teil meiner Anwendung einen kombinierten Reduzierer erstellen und verwenden, replaceReducer()
wenn ich zwischen Teilen der Anwendung wechsle.
Ist das ein guter Ansatz?
quelle
/homepage
und dann wird mehr von diesem Zweig geladen, wenn der Benutzer zu ihremprofile.
Beispiel geht das zu tun, wäre großartig. Ansonsten fällt es mir schwer, meinen Staatsbaum zu verflachen, oder ich muss sehr spezifischeuser-permissions
user-personal
So habe ich es in einer aktuellen App implementiert (basierend auf Code von Dan aus einem GitHub-Problem!)
Erstellen Sie beim Booten Ihrer App eine Registrierungsinstanz und übergeben Sie Reduzierungen, die im Eintragspaket enthalten sind:
Verwenden Sie dann beim Konfigurieren des Speichers und der Routen eine Funktion, der Sie die Reduzierungsregistrierung zuweisen können:
Wo diese Funktionen ungefähr so aussehen:
Hier ist ein grundlegendes Live-Beispiel, das mit diesem Setup erstellt wurde, und seine Quelle:
Es enthält auch die erforderliche Konfiguration, um das Hot-Reload für alle Ihre Reduzierungen zu ermöglichen.
quelle
Es gibt jetzt ein Modul, das dem Redux-Speicher injizierende Reduzierstücke hinzufügt. Es heißt Redux Injector .
So verwenden Sie es:
Reduzierstücke nicht kombinieren. Fügen Sie sie stattdessen wie gewohnt in ein (verschachteltes) Objekt von Funktionen ein, ohne sie jedoch zu kombinieren.
Verwenden Sie createInjectStore von Redux-Injector anstelle von createStore von Redux.
Injizieren Sie neue Reduzierstücke mit InjectReducer.
Hier ist ein Beispiel:
Vollständige Offenlegung: Ich bin der Schöpfer des Moduls.
quelle
Stand Oktober 2017:
Reedux
implementiert, was Dan vorgeschlagen hat und nichts weiter, ohne Ihren Laden, Ihr Projekt oder Ihre Gewohnheiten zu berühren
Es gibt auch andere Bibliotheken, aber sie haben möglicherweise zu viele Abhängigkeiten, weniger Beispiele, komplizierte Verwendung, sind mit einigen Middlewares nicht kompatibel oder erfordern, dass Sie Ihre Statusverwaltung neu schreiben. Von der Intro-Seite von Reedux kopiert:
quelle
Wir haben eine neue Bibliothek veröffentlicht, die beim Modulieren einer Redux-App hilft und das dynamische Hinzufügen / Entfernen von Reduzierern und Middlewares ermöglicht.
Bitte werfen Sie einen Blick auf https://github.com/Microsoft/redux-dynamic-modules
Module bieten folgende Vorteile:
Module können problemlos in der gesamten Anwendung oder zwischen mehreren ähnlichen Anwendungen wiederverwendet werden.
Komponenten deklarieren die von ihnen benötigten Module und Redux-Dynamic-Module stellen sicher, dass das Modul für die Komponente geladen wird.
Eigenschaften
Beispielszenarien
quelle
Hier ist ein weiteres Beispiel mit Code-Splitting und Redux-Stores, meiner Meinung nach ziemlich einfach und elegant. Ich denke, es kann sehr nützlich sein für diejenigen, die nach einer funktionierenden Lösung suchen.
Dieser Speicher ist etwas vereinfacht. Er zwingt Sie nicht dazu, einen Namespace (reducer.name) in Ihrem Statusobjekt zu haben. Natürlich kann es zu einer Kollision mit Namen kommen, aber Sie können dies steuern, indem Sie eine Namenskonvention für Ihre Reduzierer erstellen sollte gut sein.
quelle