Comment implémenter en redux la logique suivante: Il y a 2 actions: sync et async. Disons ses validate() et save(). Lorsque l'utilisateur clique sur les boutons validate() effectué et il modifie une variable isValid dans le magasin d'état. Ensuite, si isValid enregistrer l'action effectuée.Action d'appel Redux après une autre action si condition
Vous pouvez 'envelopper' ces fonctions dans 'gestionnaire de clic'.
//call it on button click
handleClick =() => {
if (validate()) {
//call save function
save()
}
}
validate =() => {
//do something
//check validness and then
if (valid) return true
}
Je pense que la logique de validation devrait être en réducteur, mais pas seulement en clicnk hadler. Le point est de l'implémenter de manière «redux». – xander27
Je veux dire des actions redux (http://redux.js.org/docs/basics/Actions.html) pas seulement des méthodes JS – xander27
Je ne pense pas que le réducteur soit un bon endroit pour cela. Pour ma part, je préfère garder le réducteur propre de ce genre de choses et les utiliser juste pour changer l'état des composants. Vous pouvez créer quelque chose comme un fichier utils et y conserver toutes ces fonctions. Mais si vous n'aimez pas ça, je vous recommande de jeter un coup d'oeil sur Redux Thunk, il vous permettra de retourner des fucntions dans les créateurs d'action, vous pouvez spécifier votre logique là-bas. – Spooner
Il existe plusieurs façons de faire ce que vous voulez. Cependant, en règle générale, ne stockez rien dans Redux qui puisse être dérivé. isValid peut être dérivé en exécutant votre validation sur votre champ (s). De plus, je ne pense pas que les états intermédiaires comme les valeurs de champs de formulaire qui changent appartiennent à Redux. Je les stockerais en état de réaction jusqu'à ce qu'ils soient considérés comme valides et soumis. Avec cela, comme Spooner mentionné dans un commentaire, vous pouvez appeler une action de synchronisation dans un thunk. Ou vous pouvez accéder à l'état dans le thunk.
Option # 1
// Action Creator
export default function doSomething(isValid) {
return (dispatch) => {
dispatch(setValid(isValid));
if (isValid) {
return fetch() //... dispatch on success or failure
}
};
}
Option # 2
// Component
dispatch(setValid(isValid));
dispatch(doSomething());
// Action Creator
export default function doSomething() {
return (dispatch, getState) => {
const isValid = getState().isValid;
if (isValid) {
return fetch() //... dispatch on success or failure
}
};
}
Vous devez effectuer saveAction lorsque validate se produit, et l'utiliser pour modifier à la fois variables isValid et d'autres variables dans les réducteurs. Aucune utilisation réelle en attendant que la variable isValid soit définie sur true. –
@bhargavponnapalli le problème est que la seconde action est asynchrone (réaction-thunk), donc elle ne peut pas être simplement combinée avec la première. – xander27
Vous pouvez peut-être valider dans l'action asynchrone, au lieu d'une action de validation distincte. Juste une idée. –