Quelle est la différence entre redux-thunk et redux-promise?

Pour autant que je sache et que je corrige si je me trompe, redux-thunk est un middleware qui nous aide à répartir les fonctions asynchrones et les valeurs de débogage dans l’action elle-même. mécanisme comme Action jette une exception de dissortingbution uniquement des objects simples.

Quelles sont les principales différences entre ces deux packages? Y a-t-il des avantages à utiliser les deux packages dans une seule application de réaction ou à s’en tenir au redux-thunk?

    redux-thunk permet à vos créateurs d’action de renvoyer une fonction:

     function myAction(payload){ return function(dispatch){ // use dispatch as you please } } 

    redux-promise leur permet de renvoyer une promesse:

     function myAction(payload){ return new Promise(function(resolve, reject){ resolve(someData); // redux-promise will dispatch someData }); } 

    Les deux bibliothèques sont utiles si vous devez envoyer une action asynchrone ou conditionnelle. redux-thunk vous permet également d’envoyer plusieurs fois au sein d’un créateur d’action. Que vous choisissiez l’un ou l’autre ou les deux dépend entièrement de vos besoins / style.

    Vous aurez probablement besoin / besoin des deux ensemble dans votre application. Commencez par redux-promis pour les tâches asynchrones générasortingces de promesses, puis augmentez pour append Thunks (ou Sagas, etc.) à mesure que la complexité augmente :

    • Lorsque la vie est simple et que vous ne faites qu’un travail asynchrone de base avec des créateurs qui renvoient une seule promesse, redux-promise améliorera votre vie et la simplifiera, rapidement et facilement. (En un mot, au lieu de penser à «déballer» vos promesses quand elles sont résolues, puis à écrire / dissortingbuer les résultats, redux-promise (-middleware) s’occupe de tout ce qui vous ennuie.)
    • Mais la vie devient plus complexe quand:
      • Peut-être que votre créateur d’action souhaite produire plusieurs promesses, que vous souhaitez envoyer en tant qu’actions séparées pour séparer les réducteurs?
      • Ou bien, vous avez une logique complexe de pré-traitement et conditionnelle à gérer avant de décider comment et où envoyer les résultats?

    Dans ces cas, l’avantage de redux-thunk est qu’il vous permet d’encapsuler la complexité au sein de votre action-créateur .

    Mais notez que si votre Thunk produit et dissortingbue des promesses, alors vous voudrez utiliser les deux bibliothèques ensemble :

    • le Thunk composera les actions originales et les expédiera
    • redux-promise s’occuperait alors de déballer chez le (s) réducteur (s) la ou les promesses individuelles générées par votre Thunk, pour éviter le passe-partout que cela implique. (A la place, vous pouvez tout faire dans Thunks, avec promise.then(unwrapAndDispatchResult).catch(unwrapAndDispatchError) … mais pourquoi le feriez-vous?)

    Un autre moyen simple de résumer la différence entre les cas d’utilisation: le début et la fin du cycle d’action Redux :

    • Les Thunks sont au début de votre stream Redux: si vous avez besoin de créer une action complexe ou d’encapsuler une logique de création d’action, en la gardant hors de vos composants et sans aucun réducteur.
    • redux-promise est pour la fin de votre stream, une fois que tout a été réduit à de simples promesses, et que vous voulez juste les déballer et stocker leur valeur résolue / rejetée dans le magasin

    NOTES / REFS:

    • Je trouve que redux-promise-middleware est une implémentation plus complète et compréhensible de l’idée derrière la redux-promise originale de redux-promise . Il est en cours de développement et est également bien complété par redux-promise-reducer .
    • il existe des middlewares similaires supplémentaires pour composer / séquencer vos actions complexes: l’une très populaire est redux-saga , qui ressemble beaucoup à redux-thunk , mais qui est basée sur la syntaxe des fonctions du générateur. Encore une fois, vous l’utiliserez probablement conjointement avec redux-promise .
    • Voici un excellent article comparant directement diverses options de composition asynchrone, y compris thunk et redux-promise-middleware. (TL; DR: “Le middleware Redux Promise réduit radicalement la comparaison entre certaines options”Je pense que j’aime Saga pour des applications plus complexes (lisez: “uses”), et Redux Promise Middleware pour tout le rest. “ )
    • Notez qu’il existe un cas important où vous pouvez penser que vous devez envoyer plusieurs actions, mais vous ne le faites pas vraiment, et vous pouvez garder les choses simples simples. C’est là que vous voulez simplement que plusieurs réducteurs réagissent à votre appel asynchrone. Mais il n’y a aucune raison pour laquelle plusieurs réducteurs ne peuvent pas surveiller un seul type d’action. Vous voulez simplement vous assurer que votre équipe sait que vous utilisez cette convention, elle ne suppose donc pas qu’un seul réducteur (avec un nom associé) peut gérer une action donnée.

    Divulgation complète: Je suis relativement nouveau dans le développement de Redux et j’ai moi-même dû faire face à cette question. Je vais paraphraser la réponse la plus succincte que j’ai trouvée:

    ReduxPromise renvoie une promesse en tant que charge utile lorsqu’une action est dissortingbuée, puis le middleware ReduxPromise fonctionne pour résoudre cette promesse et transmettre le résultat au réducteur.

    ReduxThunk, d’autre part, force le créateur de l’action à ne pas envoyer l’object d’action aux réducteurs jusqu’à ce que l’envoi soit appelé.

    Voici un lien vers le tutoriel où j’ai trouvé cette info: https://blog.tighten.co/react-101-part-4-firebase .