Come inviare un'azione quando si fa clic su Link quando si utilizza React-Router & Redux?

Question

Diciamo che ho uno Link che mi invia a una pagina per aggiungere/modificare una voce di elenco.

Come faccio a inviare un'azione Redux quando faccio clic sullo stesso Link in modo da poter aggiornare prima il negozio Redux, prima di essere effettivamente reindirizzato a quella pagina.

Esempio: Faccio clic sul pulsante Modifica -> L'azione viene inviata -> Store aggiornato, {'state': 'edit-mode'} -> Procedere al reindirizzamento.

O hai in mente un altro modo per realizzare ciò che sto cercando di fare?

Forse quando il componente è montato, eseguirò un'azione come stateToEdit in base a determinate condizioni? Se è così, per favore mostrami la tua strada. Grazie

PS: Sto usando solo un componente per tutti aggiungere/modificare/eliminare. Così sto pensando a un modo per render basato sulla state se la sua sulla edit-mode o delete-mode ecc

Answer 1

Qui ci sono un paio di modi si può andare su affrontare questo problema:

1. Invece di usare Link, prova utilizzando browserHistory.push(path) con una funzione onClick.
   • All'interno del onClick, è possibile dispatch la vostra azione, poi push in una nuova posizione.
   • Tuttavia, se si desidera eseguire questa serie di azioni in vari componenti, si avrà probabilmente la duplicazione del codice.
2. Un modo più robusto per affrontare questo problema sarebbe quello di implementare redux-thunk, che fornisce un modo generico di eseguire più "azioni" (sia esso chiamare un'azione Redux, o l'esecuzione di un'operazione asincrona, o entrambi!) In risposta a un cambiamento.
   • Dan ha una grande risposta qui mettendo in evidenza la semplicità di ciò redux-thunk offre in realtà: Can I dispatch multiple actions without Redux Thunk middleware?
   • Nel tuo caso, nella funzione incrementTwice, immaginate solo sostituendo una delle dispatch(increment) chiamate con una chiamata a browserHistory.push(action.path), simile a quello qui di seguito:

Redux thunk azione

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