Comprendre React-Redux

React-Redux: comprendre les composants, les conteneurs, les actions et les réducteurs

Hier, j’ai écrit un article sur un aperçu de haut niveau de react-redux et comment les pièces fonctionnent ensemble. Maintenant, je vais écrire plus en profondeur sur à quoi ce que chacune de ces fonctions ressemble et comment cela fonctionne.

Component

C’est le plus simple. Pour la plupart, les composants de la react-redux sont similaires à ceux de vanilla. Consultez l’exemple de code ci-dessous:

C’est un composant de réaction assez normal et typique, avec une fonction componentDidMount et une fonction render. Notez qu’il ne fait aucune référence à l’état stat dans ce fichier; ce n’est pas géré par le composant component en redux.

Maintenant, disons que je voulais que mon prop buttonListState reflète réellement ce qui est dans l’état stat. Jetons un coup d’oeil à la façon de le faire.

Container

Le conteneur container est la fonction (généralement dans un fichier séparé) qui donne aux props du composant component la capacité spéciale d’interagir avec l’état stat. Ceci est réalisé en utilisant 3 fonctions. La première, mapStateToProps, utilisée pour lier une propriété de l’objet d’état stat avec un prop dans le composant component. La seconde, mapDispatchToProps, est utilisée pour lier un prop de composant component à une action (qui, lorsqu’elle est envoyée, conduit à la génération d’un nouvel état stat). Enfin, la fonction connect spécifie le composant auquel le conteneur container doit être relié. Exemple de code ci-dessous.

Dans l’exemple, j’utilise mapStateToProps pour ‘relier’ le prop buttonListState dans mon composant à state.addButtonClick. Maintenant, lorsque cette propriété d’état change, mon composant prop est également modifié. J’utilise également mapDispatchToProps pour relier mon composant updateStateFromServer afin de distribuer l’action updateStateFromServer. Maintenant, chaque fois que prop est appelé dans mon composant, je serai sûr que l’action sera envoyée.

Action Dispatcher

Celui-ci est assez simple. Tout ce qu’il fait c’est retourner une action que le réducteur va ‘entendre’. Il est typique que toutes les actions d’une application soient dans un fichier avec rien d’autre à l’intérieur. J’ai fourni deux exemples de répartiteurs d’actions ci-dessous:

Le répartiteur d’action toggleSettings, qui est lié à un autre composant prop dans un autre fichier utilisant mapDispatchToProps, est l’exemple le plus simple possible. Tout ce qu’il fait est d’exporter une action de type ‘SETTINGS_TOGGLE’ qu’un réducteur quelque part écoute. UpdateStateFromServer est un peu plus compliqué car il fait une requête AJAX avant d’envoyer des actions. Il est typique pour toutes les requêtes HTTP dans le répartiteur d’actions dans une application react-redux.

Reducer

Ainsi, après que ces actions soient envoyées, où sont-elles traitées? Eh bien elles ont elles ont atterri dans le réducteur. Dans la plupart des applications react-redux, il y aura un dossier distinct qui contient toutes les fonctions du réducteur.

Notez également que pour chaque réducteur reducer, il y aura une propriété d’état state supplémentaire. Ainsi, si votre application dispose d’un réducteur reducer d’utilisateurs, d’un réducteur de messages et d’un réducteur de notifications, votre objet d’état aura 3 propriétés. Chaque fonction réductrice modifie uniquement cette propriété d’état. Notez également que pour chaque réducteur, il y aura une propriété d’état supplémentaire. Ainsi, si votre application dispose d’un réducteur d’utilisateurs, d’un réducteur de messages et d’un réducteur de notifications, votre objet d’état aura 3 propriétés. Chaque fonction réductrice modifie uniquement cette propriété d’état.

Ci-dessus est l’exemple le plus simple possible d’un réducteur reducer. Lorsque l’action ‘SETTINGS_TOGGLE’ est distribuée, l’action entraînera le fait que state.toggle sera l’opposé de ce qu’il était auparavant. Notez que sur la ligne 1, j’ai mis state = false. Cela signifie que state.toggle sera défini sur false par défaut lorsque mon application est chargée. Il est important que le réducteur dispose d’un cas par défaut et que l’état soit défini sur quelque chose par défaut.

Source: Article traduit depuis sa version originale en anglais  de son auteur Jason Holtkamp.