J'ai vu un exemple de code, à l'intérieur du fichier App.js , mettant en place ComponentA:
let connectedComponent = connect(
mapStateToProps,
mapDispatchToProps
)(ComponentA);
export default connectedComponent;
mais que faire si App doit également utiliser ComponentB - comment la configurer? Que faire si ComponentB doit utiliser ComponentC et doit également le configurer?
3 Réponses :
Dans react-redux, connect est simplement une fonction d'ordre supérieur qui produit un nouveau composant, qui a l'état redux (mapStateToProps) et les créateurs d'action (mapDispatchToProps) attachés à l'objet props de l'original < code> composant que vous avez passé à la fonction renvoyée par connect . Si vous souhaitez que plus de composants soient connectés au magasin redux, vous devrez les transmettre à la fonction connect .
Voir Composants d'ordre supérieur dans la documentation React pour comprendre le fonctionnement de Connect .
Il peut également être intéressant de savoir que puisque hooks ce n'est pas la seule option. Vous pouvez utiliser les fonctions useSelector et useDispatch exportées depuis react-redux pour utiliser l'état de redux et distribuer les actions dans vos composants compatibles hook.
comment configurer ComponentB dans App.js ?
Est-ce une hypothèse ou connaissez-vous le contenu de App.js ? Je suppose que ComponentB est déclaré ailleurs? Vous devez connecter ComponentB au magasin redux en utilisant connect . Vous ne connectez pas l'application à un autre composant, vous connectez le magasin redux à un composant.
La solution la plus claire pour cela consiste simplement à mettre tous les composants dans des fichiers séparés et à < connect chacun vers le redux avec leur propre mapStateToProps < / strong> et les paramètres
et pour ajouter un autre ComponentA à la page, vous devez écrire ces mapStateToProps, vous connecter, etc., une fois de plus? Le réducteur doit être développé, les noms des actions doivent être développés, etc, etc? Il ne s'agit pas simplement d'ajouter 1 ou 2 lignes, mais de devoir gérer 40 à 50 lignes de code supplémentaires?
L'APP.JS elle-même n'a pas à être connectée au Redux. Il s'agit simplement d'une enveloppe dans ce cas qui collecte et montre le composanta, le composantb, ... alors Componenta a ses propres parties de l'état Redux qu'il a besoin pour son fonctionnement et son composant a ses propres parties de l'état Redux Trop défini dans MapStationoToprops. . REDUX consiste à connecter chaque composant auchux, puis à chaque composant peut utiliser Redux State directement à l'aide de ses accessoires passés par Connectez fonction.
(Si Componenta est un compteur pour la propriété de magasin Counta et ajoutant un autre composant pour CountB)
Ok, dans ce cas, le mieux serait de connecter l'application à redux et dans son mapStateToProps définir le mappage de countA et countB. Ensuite, dans votre componentA, créez simplement un nouveau paramètre nommé f.e. count et transmettez ce nombre de l'application au composantA, vous allez avoir le composantA dans l'application deux fois, la première fois avec count = countA et la deuxième fois count = countB.
Et si App doit également utiliser ComponentB - comment le configurer? Que faire si ComponentB doit utiliser ComponentC et doit également le configurer?
Si votre question est correcte, componentB et componentC ou / et componentN seront définis comme des composants enfants de App.js .
Fondamentalement, connect () liera votre composant au magasin redux afin que chaque fois qu'un changement est détecté dans le magasin, chaque composant connecté sera informé du changement en utilisant mapStateToProps . De plus, des composants mutuellement exclusifs peuvent être connectés de la même manière avec plusieurs connect () .