Comment envoyer une action en cliquant sur Lien lors de l'utilisation de React-Router & Redux?

Question

Disons que j'ai un Link qui m'envoie vers une page pour ajouter/modifier une entrée de liste.

Comment puis-je envoyer une action Redux lorsque je clique sur le Link lui-même afin de pouvoir mettre à jour le magasin Redux d'abord, avant d'être réellement redirigé vers cette page.

Par exemple: je clique sur le bouton Modifier -> L'action est envoyée -> Magasin mis à jour, {'state': 'edit-mode'} -> Procéder à la redirection.

Ou avez-vous une autre façon de réaliser ce que j'essaie de faire?

Peut-être que lorsque le composant sera monté, j'exécuterai une action comme stateToEdit en fonction de certaines conditions? Si oui, alors montrez-moi votre chemin. Merci

PS: J'utilise un seul composant pour tous les ajout/modification/suppression. Je pense donc à un moyen de rendu basé sur le state que ce soit sur edit-mode ou delete-mode etc.

Answer 1

Voici quelques façons de résoudre ce problème:

1. Au lieu d'utiliser Link, essayez d'utiliser browserHistory.Push(path) avec une fonction onClick.
   • À l'intérieur de onClick, vous pouvez dispatch votre action, puis Push vers un nouvel emplacement.
   • Cependant, si vous souhaitez effectuer cette série d'actions dans divers composants, vous souffrirez probablement de duplication de code.
2. Une manière plus robuste de résoudre ce problème serait d'implémenter redux-thunk, Qui fournit un moyen générique d'effectuer plusieurs "actions" (qu'il s'agisse d'appeler une action Redux, ou d'effectuer une opération asynchrone, ou les deux!) En réponse à un changement.
   • Dan a une excellente réponse ici, soulignant la simplicité de ce que redux-thunk Offre réellement: Puis-je envoyer plusieurs actions sans le middleware Redux Thunk?
   • Dans votre cas, dans la fonction incrementTwice, imaginez simplement remplacer l'un des appels dispatch(increment) par un appel à browserHistory.Push(action.path), similaire à ce qui suit:

Action de thunk Redux

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