ngrx Aktionen / Effekte verketten - zB einloggen und dann navigieren

8

Ich bin neu in der ngrx- und Redux-Architektur und ich habe Probleme zu verstehen, wie ich Aktionen / Effekte verketten sollte. Ein Beispiel ist das Erreichen grundlegender Funktionen, z. B. das Ergreifen einer Aktion nach der Anmeldung eines Benutzers. Mein Hauptproblem besteht darin, dass die Aktion nach dem Anmelden des Benutzers vom aktuellen Status der Anwendung abhängt - der Benutzer kann sich überall befinden in der Anwendung, wenn eine Anmeldeaufforderung / Seite angezeigt wird.

Jedes Beispiel Ich habe Hardcode-Effekte gesehen, die passieren werden, sobald der Benutzer sich angemeldet hat. In meinem Szenario passt das nicht gut, wie oben erwähnt. Ich will nicht immer die gleiche Aktion passieren.

Hier ist ein Beispielcode einer Homepage, die eine Login-Komponente enthält. In diesem Szenario möchte ich, dass der Benutzer nach dem Anmelden an "/ buy" weitergeleitet wird.

%Vor%

Beispieleffekt

%Vor%

Ich habe mehrere Gedanken darüber, wie Sie dieses Problem lösen könnten - aber keiner von ihnen fühlt sich richtig. Dazu gehören

  • Übergeben von Daten mit der Login-Nutzlast, um eine Aktion zu bestimmen, die als nächste
  • ausgeführt werden soll
  • viele Effekte geschrieben, die bei LoginSuccess aktiv werden, aber auf einer höheren Ebene gefiltert werden
  • Schreiben Sie einen komponentenspezifischen Effekt, indem Sie sich Ereignisse im Laden anhören (ist das möglich / schlechte Praxis?)
  • Lesen von Daten aus dem Store über den aktuellen Login-Status und die darauffolgende Verarbeitung in der Komponente. Diese Logik würde jedoch sofort ausgeführt werden, was möglicherweise nicht den gewünschten Effekt hat

Kann mir jemand den richtigen Weg weisen / Beispiele dafür, wie das gelöst werden sollte?

    
dannym 21.02.2017, 16:45
quelle

1 Antwort

9

Ein Effekt kann mehrere Aktionen mit mergeMap in einem Array von Aktionen auslösen. Was ich normalerweise tun würde ist, die zusätzlichen Aktionen, die ich möchte, den Login-Effekt auch versenden zu lassen.

%Vor%

Der Login-Effekt würde dann alle übergebenen Aktionen mit mergeMap versenden. Sie müssten für jede Aktion noch einen Effekt erstellen, aber jetzt können Sie mehr wiederverwendbare Aktionen erstellen, z. B. eine Redirect-Aktion.

%Vor%

Was ich an dieser Lösung mag, ist, dass sie in die Zukunft skalierbar ist, da alle Aktionen weitergegeben werden können, und es gibt keinen Switch oder einen anderen Tree, um zu entscheiden, was zu tun ist. Sie können auch mehrere Aktionen übergeben, sodass Sie keine 'redirectAndCloseModal'-Aktion erstellen müssen. Sie können redirect sowie closeModal übergeben.

%Vor%

Sie können ein wenig mehr über lesen, indem Sie bei diesem GitHub-Problem mehrere Aktionen von einem @Effect () aus senden.

Bearbeiten: In Bezug auf Kommentare sind es nicht nur Änderungen an Routen, die dazu führen, dass Sie die Anmeldung abbrechen müssen. Es kann alles sein, z. B. das Schließen eines Modals, und es gibt keine generische Methode Das. Sie könnten Ihrem Geschäft etwas hinzufügen, z. B. runLoginActions boolean, und dann diese Daten aus Ihrem Geschäft lesen, nachdem die Anmeldeanforderung zurückkommt.

Dann könnten Sie in Ihrem login$ -Effekt das aus dem Geschäft lesen, um zu entscheiden, ob Sie die zusätzlichen Aktionen ausführen wollen oder nicht.

%Vor%

Beachten Sie, dass Sie in Ihrem Reduzierer für loginSuccess Ihr runLoginActions = true einstellen sollten und es standardmäßig als true starten soll, nur wenn es deaktiviert wird, wenn eine Route geändert wird oder eine Komponente zerstört wird.

>

Denken Sie daran, dass dies eine allgemeine Lösung ist, und Sie müssen die Aktionen selbst hinzufügen, Ihre Reduzierungen aktualisieren usw.

Es ist eher ein manueller Prozess, aber da Ihre Fälle, in denen Sie keine Aktionen ausführen wollen, ziemlich spezifisch sind, muss dies wahrscheinlich auf diese Weise geschehen.

    
Adam 21.02.2017 18:23
quelle

Tags und Links