korrekte Art, bestimmte Aktionen auf einer Redux-Anwendung zu hören/darauf zu reagieren

Question

Ich schreibe meine erste Redux-Anwendung mit Angular und ngrx. Bei mehreren Gelegenheiten habe ich Zweifel gehabt, wie man eine Reihe von Handlungen richtig "verketten" kann. Ich mache ein Beispiel.

Meine App verfügt über ein Kundenlistenfeld und ein Kundendetailfenster. Wenn der Benutzer einen bestimmten Kunden auswählt, möchte ich im Detailfenster die Kundeninformationen anzeigen, aber auch das Kundenlistenfenster ausblenden.

Derzeit verschicke ich eine CustomerSelected Aktion, die einen Effekt (einen Nebeneffekt) auslöst, der die Kundendetails vom Server lädt. Wenn die Details geladen sind, verschicke ich eine CusomerDetailLoaded Aktion, die den Laden mit den Kundeninformationen aktualisiert. Es löst auch einen Effekt aus, der eine Aktion HideCustomerList versendet, die das Kundenlistenfeld ausblendet.

Ist dies akzeptabel oder gibt es bessere Möglichkeiten, dies zu erreichen? Insbesondere habe ich das Gefühl, dass die CustomerDetailLoaded jetzt eng mit einem Layout-Detail gekoppelt ist, alle Zeiten, in denen wir ein Kundendetail laden, verstecken wir auch das Kundenlisten-Panel ... klingt für mich wie ein Fehler.

Danke, Gibt

Answer 1

redux-observable Bibliothek bietet schöne Möglichkeit, bestimmte Aktionen zu hören und weitere Aktionen nach Versand.

Zum Beispiel, wenn Sie ACTION_B nach ACTION_A versenden wollen, können Sie etwas tun:

const rootEpic = (action$) => action$.ofType('ACTION_A').mapTo({ 
    type: 'ACTION_B' 
}); 

Als nächstes, wenn Sie ACTION_C nach ACTION_B versenden möchten, können Sie combineEpics Helfer verwenden:

const epicA = (action$) => action$.ofType('ACTION_A').mapTo({ 
    type: 'ACTION_B' 
}); 
const epicB = (action$) => action$.ofType('ACTION_B').mapTo({ 
    type: 'ACTION_C' 
}); 
const rootEpic = combineEpics(
    epicA, 
    epicB 
) 

Werfen Sie einen Blick auf ihre für weitere Informationen.