Wie verschicke ich eine Aktion, wenn ich bei der Verwendung von React-Router & Redux auf Link klicke?

Question

Angenommen, ich habe eine Link, die mich auf eine Seite zum Hinzufügen/Bearbeiten eines Listeneintrags schickt.

Wie versende ich eine Redux-Aktion, wenn ich auf die Link selbst klicke, damit ich den Redux-Speicher zuerst aktualisieren kann, bevor ich tatsächlich auf diese Seite umgeleitet werde.

ZB: Ich klicke auf Bearbeiten Schaltfläche -> Aktion wird ausgelöst -> Store aktualisiert, {'state': 'edit-mode'} -> Weiterleiten umleiten.

Oder haben Sie einen anderen Weg, um zu erreichen, was ich versuche zu tun?

Vielleicht, wenn Komponente montiert ist, dann werde ich eine Aktion wie stateToEdit basierend auf bestimmten Bedingungen ausführen? Wenn ja, dann zeige mir bitte deinen Weg. Danke

PS: Ich benutze nur eine Komponente für alle hinzufügen/bearbeiten/löschen. Also ich bin eine Art und Weise zu denken zu machen, auf der Grundlage der state ob seine auf edit-mode oder delete-mode usw.

Answer 1

Hier sind ein paar Möglichkeiten, wie Sie zur Adressierung dieses Problems gehen könnten:

1. Statt Link zu verwenden, Versuchen Sie es mit browserHistory.push(path) mit einer onClick Funktion.
   • Im Inneren des onClick, können Sie Ihre Aktion dispatch, dann push an einen neuen Standort.
   • Wenn Sie jedoch diese Reihe von Aktionen in verschiedenen Komponenten ausführen möchten, werden Sie wahrscheinlich Codeduplizierung erleiden.
2. Eine robustere Art und Weise dieses Problem zu beheben wäre redux-thunk zu implementieren, die zur Durchführung mehrerer „Aktionen“ eine generische Art und Weise bietet (sei es eine Redux Aktion aufrufen oder einen Asynchron-Betrieb durchgeführt wird, oder beides!) In Antwort auf eine Änderung.
   • Dan hat eine große Resonanz hier Hervorhebung der Einfachheit der redux-thunk bietet tatsächlich: Can I dispatch multiple actions without Redux Thunk middleware?
   • In Ihrem Fall in der incrementTwice Funktion, Stellen Sie sich nur mit einem Aufruf an browserHistory.push(action.path), ähnlich dem einer der dispatch(increment) Anrufe zu ersetzen unten:

Redux thunk Aktion

export const dispatchThenRoute = (myAction, myPath) => { 
    return (dispatch) => { 
     dispatch(myAction) 
     browserHistory.push(myPath); 
    } 
};