2017-10-19 10 views
0

J'ai quelques champs qui, une fois mis à jour, changent le href d'une image (qui est vraiment une extrémité d'une API externe qui génère un PNG basé sur la saisie de texte). Lorsque cette image est chargée, elle déclenche une action pour mettre à jour un autre composant afin qu'il corresponde à la taille de l'image (qu'il ne peut obtenir qu'une fois le chargement de l'image terminé). J'ai mis redux-undo pour exclure cette action de l'historique puisque ce n'est pas une action de l'utilisateur.React-Redux: Mutant l'état pour émuler des effets secondaires avec redux-undo

Voici mon problème: Lorsque je fais une action qui ne déclenche PAS de changement, puis annuler cette action, l'état est faux puisque la taille a changé entre les actions de l'utilisateur.

Une idée que j'avais été de muter l'état (Yeesh):

Dans réducteur

case 'UPDATE_TARGET_SIZE': 
    /** 
    * HERE BE DRAGONS 
    * I am also mutating the current state since this action needs to 
    * NOT count as an user action 
    */ 
    state.targetWidth = action.targetWidth 
    state.targetHeight = action.targetHeight 

    return { 
     ...state 
    } 

Bien que cela fonctionne sans inconvénients apparents ... il se sent comme un sale hack. Y a-t-il une autre façon de le faire ou est-ce sûr tant que je sais pourquoi je mute l'état?

Une bibliothèque comme redux-saga peut-elle m'aider? J'avoue que je n'ai pas lu sa documentation car je ne fais pas de "vrais" appels API et je ne veux pas avoir de solution overkill.

Edit:

Voici un meilleur exemple:

type I dans une entrée de texte, ce qui provoque le href changer. Une nouvelle image est chargée, ce qui déclenche l'action qui est exclue de l'historique. À ce stade, l'histoire n'a pas la modification de cette dernière action.

Si je fais une action qui copie cette partie de l'état (dans le réducteur de droite), l'état est correct. Si je fais une action qui ne touche qu'un autre réducteur, ce sera toujours faux. Donc, lorsque j'appuie sur Annuler, je défais à l'état incorrect. Mais si j'obtiens cette action pour faire muter l'état, alors c'est toujours valide.

+1

Alors que je lisais ceci, je pensais que Redux-sauge pourrait être une bonne solution pour cela et ensuite j'ai vu ta question. Oui, je pense que redux saga serait très utile pour ça. Donner les docs une lecture à travers, je pense que vous aimerez ce que vous trouvez. – Dude

+0

Merci mec (super Nick). Je vais jeter un coup d'oeil quand je reviens sur ce cheval et mettre à jour ici. –

Répondre

1

Une lib comme redux-saga peut-elle m'aider? J'avoue que je n'ai pas lu sa documentation puisque je ne fais pas de "vrais" appels d'API et que je ne veux pas pour avoir une solution d'overkill.

Redux-sagaRedux-saga permet d'effectuer des effets secondaires personnalisés et d'introduire le gestionnaire de processus car il possède sa propre boucle d'événements. En appliquant à la tâche d'origine, saga peut aider avec l'action de division avec la demande et la réponse dans le temps.

Cas d'utilisation typique qui émet une action avec le suffixe _REQUEST, comme LOAD_IMAGE_REQUEST, qui intercepte avec le gestionnaire saga et ne passe pas dans les réducteurs. Puis, une fois l'opération asynchrone terminée, saga émet une action de type _SUCCESS ou _FAILURE, en fonction de la réussite de l'opération. Que les actions passées en magasin et appliquées avec des réducteurs.

De plus, il existe une idéologie appelée optimistic update.

+0

Après avoir utilisé 'redux-saga' pendant un certain temps, j'ai réussi à résoudre mon problème en gérant ces actions dans les transactions. Merci. :) –