Integrieren von react-redux in eine vorhandene Angularjs-Anwendung

Question

Ich überlege mir, react-redux in eine 3 Jahre alte Codebase von Angularjs zu integrieren. Ich möchte nicht die gesamte Codebase auf einmal umgestalten, sondern schrittweise neue Funktionen einführen, die mein Team entwickeln wird.

1. Gibt es Best Practices? (Alle Ressourcen werden geschätzt)
2. Kann ein altes Feature (geschrieben in ng) react-redux-Teile enthalten oder muss ich es neu schreiben?
3. Wie kann ich die gleichen API-Aufrufe vermeiden? (wenn beide dieselbe Ressource benötigen)
4. Soll ich die Änderung alle zusammen vermeiden?

Answer 1

Ich habe erfolgreich die Anwendung unter dem braun-Feld migriert Einschränkungen ich auf die ursprüngliche Frage hingewiesen.

Die Lösung auf zwei Ansätze basiert:

1. Kleinteile - sind Komponenten, die so ziemlich enthalten sind. Zum Beispiel Dropdown-Liste für Benachrichtigungen.
2. Gesamter Teil der App, den ich noch nicht migrieren kann - im Grunde einige Routen/Ansichten, die noch in Angular geschrieben werden.

Beide näherten Verwendung einer ähnlichen Technik der, die hier vorgeschlagen: http://softeng.oicr.on.ca/chang_wang/2017/04/17/Using-AngularJS-components-directives-in-React/?utm_source=reactnl&utm_medium=email

TIPP: Es ist viel einfacher, wenn Ihre Winkelabhängigkeiten richtig verwaltet werden.

Answer 2

1. Ich weiß nicht, von einem bestimmten Best Practice, aber ich vor kurzem begonnen, bisher ng-Redux (https://github.com/angular-redux/ng-redux) in meinen aktuellen Winkel 1.5 App zu großem Effekt. Es war wirklich gut, die Vorteile des unidirektionalen Datenflusses und des strukturierten Zustandsmanagements von Redux zu nutzen, während der Angular-Core beibehalten wurde. Auf diese Weise können Sie auch Schritt für Schritt um ein Modell nach dem anderen migrieren. Obwohl ich es selbst nicht verwendet habe, sehe ich, dass https://github.com/ngReact/ngReact zum Einwickeln von Komponenten in Angular-Direktiven verfügbar ist. Wenn Sie mit react-redux standalone arbeiten möchten, könnte das ein gutes Sprungbrett sein.
2. Es gab einige Refactoring erforderlich, um ng-Redux in bestehende Funktionen zu integrieren, aber wenn Sie bereits Modelle für Ihre Daten außerhalb von Controllern pflegen, ist es nicht so schlimm. Mit Ng-redux können Sie Action Creator-Funktionen direkt von Ihrem Controller aus aufrufen, wodurch normalerweise Benutzeraktions-Ereignishandler ersetzt werden.
3. Sie können Ihre API-Aufrufe leicht mit Async-Aktionen mit Redux-Thunk durchführen, wenn Sie ng-redux verwenden. Sie können vorhandene Angular-Dienste einfach verwenden, um Ihre API anzufordern, und dann die Antwort verwenden, um eine Standardaktion zur Aktualisierung des Status zu versenden.
4. Ich würde sagen, es lohnt sich zumindest, ng-redux zu integrieren, um den Datenfluss Ihrer App zu standardisieren. Es hilft Ihnen dabei, Ihr Projekt besser zu organisieren und kann die Leistung je nach Refactoring verbessern. Der Vorteil von ngReact ist mir jedoch weniger klar, es sei denn, Sie versuchen, Komponenten langsam zu konvertieren, bis Sie den Angular-Kern vollständig entfernen können.