L‘une des choses les plus difficiles à comprendre pour un débutant avec React-Redux est le flux de données de haut niveau entre le composant et l’état et vice versa. J’ai trouvé cela frustrant à comprendre la première fois que j’ai essayé de plonger dans Redux, et il n’y a pas beaucoup d’articles en ligne qui couvrent ce sujet spécifiquement sans entrer dans les détails inutiles.
Dans ce post, je vais couvrir les bases de la façon dont Redux fonctionne avec React (React-Redux) à partir d’une perspective de haut niveau. Je vais aussi passer en revue ce qui se passe lorsqu’un utilisateur saisit quelque chose qui conduit à la création d’un nouvel état.
Component (Le composant): C’est là où tout commence dans React-Redux. C’est la chose que l’utilisateur voit réellement sur son écran et interagit avec. Par exemple, un bouton ou une liste de boutons. C’est généralement la même chose que votre composant React normal. Dans le composant, vous pouvez créer des accessoires, générer une partie de code HTML avec votre fonction render ou exécuter les fonctions que vous souhaitez dans la fonction componentDidMount (). Cependant, il existe une grande différence entre les composants que vous devriez noter lors de l’utilisation de redux: le composant ne peut PAS accéder directement à l’état ou changer d’état. Alors, comment allez-vous stocker des informations dans votre application? Pour cela, nous devrons créer un conteneur (container) pour le composant.
Container (Le conteneur): C’est un fichier qui correspond directement à un seul composant. Pensez-y comme un conteneur littéral où vous mettez votre composant (Component) pour l’y mettre à niveau. En utilisant deux fonctions de conteneur appelées ‘mapDispatchToProps‘ et ‘mapStateToProps‘, vous pouvez maintenant lier les accessoires de votre composant aux régulateurs d’état et d’action (qui sont utilisés pour changer l’état). Si vous avez un div dans votre composant et que vous voulez afficher une propriété de l’état, vous pouvez simplement faire en sorte que ce div affiche un prop, puis utiliser mapStateToProps pour relier ce prop à l’état. Si vous voulez que votre composant stocke quelque chose dans l’état, vous pouvez créer un prop, l’appeler en tant que fonction, puis utiliser mapDispatchToProps pour envoyer une action. Cela nous amène au prochain type de fichier dont votre programme Redux aura besoin.
Action Creator (Le créateur d’action): Dans ce fichier, vous allez écrire les fonctions qui distribuent une action. Ces fonctions seront liées à vos composants par la fonction mapDispatchToProps du conteneur. À ce moment-là, un composant devrait être capable d’appeler un prop comme une fonction et de savoir que cela va mener à l’envoi d’une action. Après l’envoi de l’action, il sera entendu par un seul type de fonction: reducer (le réducteur).
Reducer (Le réducteur): C’est la dernière étape du processus. Après que l’action est envoyée, le réducteur peut maintenant générer un nouvel état basé sur ce que l’action veut qu’il fasse. Notez que l’état ne change jamais réellement dans Redux, mais que le réducteur génère un nouvel état qui est une copie de l’ancien état, mais avec une sorte de modification.
Maintenant, je vais parcourir un exemple simple pour montrer comment une entrée utilisateur peut déclencher un changement d’état qui est reflété par une partie différente de l’écran.
- L’utilisateur clique sur un bouton dans l’application et un composant prop est appelé comme une fonction.
- Le conteneur correspondant distribue une action. Cela se produit car le prop (qui vient d’être appelé dans le conteneur) est lié à un répartiteur d’action utilisant mapDispatchToProps (dans le conteneur).
- Un réducteur ‘entend’ cette action et exécute une fonction qui renvoie un nouvel état avec des modifications spécifiques.
- Le conteneur ‘sait’ que cet état a changé et modifie un prop spécifique dans le composant à la suite de la fonction mapStateToProps.
- Le composant a maintenant un prop qui a officiellement changé en raison de la génération d’un nouvel état, donc si ce prop est responsable de toute interface utilisateur visible, l’utilisateur verra bien qu’elle change automatiquement.
Source: Article traduit depuis sa version originale en anglais de son auteur Jason Holtkamp.
Note de l’auteur: L’auteur original de cet article a précisé que dans son prochain article, il expliquera plus en détail à quoi devrait ressembler la structure de fichier d’une application React-Redux et qu’il donnera également quelques exemples de ce à quoi ressemblent ces fichiers. et de ma part je serais heureux de vous en transmettre davantage chers lecteurs en le traduisant fidèlement comme d’habitude.
