Quelles sont les différences entre redux, react-redux, redux-thunk?
J'utilise React + Flux. Notre équipe envisage de passer de flux à redux. Redux est très déroutant pour moi, venant du monde des flux. Dans flux, le flux de contrôle est simple à partir de Composants -> actions -> Stocker et stocker les mises à jour des composants. C'est simple et très clair.
Mais en redux sa confusion. Il n'y a pas de magasin ici, oui, il y a quelques exemples sans utiliser store. J'ai suivi plusieurs tutoriels, il semble que tout le monde a son propre style d'implémentation. Certains utilisent des conteneurs et d'autres non. (Je ne connais pas ce concept de conteneurs et ne suis pas en mesure de comprendre ce que mapStateToProps, mapDispatchToProps fait).
- Quelqu'un peut-il expliquer clairement comment le flux de contrôle se produit dans le redux?
- Quels sont les rôles des composants/conteneurs/actions/créateurs d'action/magasin dans redux?
- Différence entre redux/react-redux/redux-thunk/autres?
- Il serait très utile de pouvoir publier des liens vers des tutoriels simples et précis redux [].
- Quelqu'un peut-il expliquer clairement comment le flux de contrôle se produit dans Redux? Redux a (toujours) un seul magasin.
Chaque fois que vous souhaitez remplacer l'état dans le magasin, vous envoyez une action.
L'action est interceptée par un ou plusieurs réducteurs.
Le ou les réducteurs créent un nouvel état qui combine l’ancien état et l’action expédiée.
Les abonnés du magasin sont informés qu'il y a un nouvel état.
- Quels sont les rôles des composants/conteneurs/actions/créateurs d'action/magasin dans redux?
Store - conserve l'état et, lorsqu'une nouvelle action arrive, exécute le pipeline dispatch -> middleware -> réducteurs, et informe les abonnés lorsque l'état est remplacé par un nouveau.
Composants - parties de vue muettes qui ne sont pas directement au courant de l'état. Aussi connu comme composants de présentation.
Conteneurs - éléments de la vue connaissant l'état à l'aide de react-redux. Également appelés composants intelligents et composants d'ordre supérieur
Notez que les conteneurs/composants intelligents par rapport aux composants stupides constituent simplement un bon moyen de structurer votre application.
Actions - identique à flux - modèle de commande avec type et charge utile.
Action créateurs - moyen DRY de créer des actions (pas strictement nécessaire)
- Différence entre redux/react-redux/redux-thunk/autres?
redux - flux comme flux avec un magasin unique, qui peut être utilisé dans n´importe quel environnement que vous aimez, y compris Vanilla js, react, angular 1/2, etc ...
react-redux - les liaisons entre redux et react, qui créent des conteneurs (composants intelligents) qui écoutent les changements d'état du magasin, préparent les accessoires et rendent les composants de présentation (muets).
redux-thunk - middleware qui vous permet d’écrire des créateurs d’action qui renvoient une fonction au lieu d’une action. Le thunk peut être utilisé pour retarder l'envoi d'une action ou uniquement si une certaine condition est remplie. Utilisée principalement pour les appels asynchrones vers api, cette action envoie une autre action en cas de succès/échec.
- Il serait très utile que vous puissiez poster des liens vers des sites simples et tutoriels précis sur redux.
Pour répondre à votre question sur le titre:
Quelles sont les différences entre redux, react-redux, redux-thunk?
- redux: bibliothèque principale (indépendante de React)
- redux-thunk: un middleware redux qui vous aide avec des actions asynchrones
- react-redux: connecte votre magasin redux avec ReactComponents
- redux: bibliothèque de gestion de l'état de l'application.
- react-redux: Bibliothèque de gestion React état de l'application.
- redux-thunk: un middleware pour la journalisation, les rapports d'incidents, la communication avec une API asynchrone, le routage, etc.