Quel est le rapport entre Redux et la réaction ?

La bibliothèque React-redux peut être associée à Redux dans React ; React-redux fournit une certaine encapsulation, qui peut organiser le code de manière plus scientifique, nous permettant d'utiliser Redux dans le code React plus confortablement.

L'environnement d'exploitation de ce tutoriel : système windows7, version React17 Cette méthode convient à toutes les marques d'ordinateurs.

Redux lui-même n'est pas lié à React. Il s'agit d'un module d'application Javscript général utilisé pour la gestion de l'état de l'application. Pour utiliser Redux dans un projet React, une meilleure façon est d'utiliser la bibliothèque React-Redux pour se connecter. Cela signifie que sans React-Redux, ces deux bibliothèques ne seront pas utilisées ensemble. React-Redux fournit une certaine encapsulation, mais plus. manière scientifique d'organiser le code, nous permettant d'utiliser Redux dans le code React plus confortablement.

Comment Redux et React fonctionnent-ils ensemble ?

react-redux fournit deux amis de base : connect et supplier. Ils connectent le composant et redux. Le fournisseur transmet le magasin au composant. Le composant émet une action via dispatch. est basé sur l'action. L'attribut type appelle le réducteur correspondant et transmet l'état et cette action. Le réducteur traite l'état et renvoie un nouvel état et le met dans le magasin. Connect surveille les modifications dans le magasin et appelle setState. Mettre à jour le composant.À ce stade, les accessoires du composant changent également en conséquence.

Provider :

Le fournisseur est un composant qui accepte le magasin comme accessoire et le transmet ensuite via le contexte. Tout composant de cette réaction peut obtenir le magasin via le contexte

connect :

connect(mapStateToProps, mapDispatchToProps, mergeProps, options) est une fonction qui accepte quatre paramètres et renvoie une fonction—wrapWithConnect, wrapWithConnect qui accepte un Le composant est utilisé en tant que paramètre wrapWithConnect(component), qui définit en interne un nouveau composant connect (composant conteneur) et utilise le composant entrant comme sous-composant de connect et le renvoie.

mapStateToProps(state.[ownPros]):

mapStateToProps accepte deux paramètres, stocke l'état et les accessoires personnalisés, et renvoie un nouvel objet, cet objet est transmis à le composant d'interface utilisateur dans le cadre des accessoires. Nous pouvons personnaliser un objet à renvoyer en fonction des données requises par le composant. Les modifications dans ownProps déclencheront également mapStateToProps

mapDispatchToProps(dispatch,[ownProps]):mapDispatchToProps if S'il s'agit d'un objet, il sera lié au magasin et transmis au composant d'interface utilisateur dans le cadre des accessoires. Si cette fonction accepte deux paramètres, bindActionCreators liera l'action et la répartition et renverra un objet. Cet objet sera transmis au composant d'interface utilisateur avec ownProps dans le cadre des accessoires, donc que mapDispatchToProps soit un objet ou une fonction, il renverra éventuellement un object , s'il s'agit d'une fonction, la valeur clé de cet objet peut être personnalisée.

Pour plus de connaissances liées à la programmation, veuillez visiter :

Enseignement de la programmation

 ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!