Différence entre composant et conteneur en réaction redux

Quelle est la différence entre le composant et le conteneur en réaction à redux?

Component fait partie de l’API React. Un composant est une classe ou une fonction décrivant une partie d’une interface utilisateur React.

Container est un terme informel pour un composant React connect à un magasin Redux. Les conteneurs reçoivent les mises à jour d’état et dispatch actions de dispatch Redux, et ils ne rendent généralement pas les éléments DOM; ils délèguent le rendu aux composants enfants de présentation .

Pour plus de détails, lisez Dan Abramov.

Le composant chargé de récupérer les données et de les afficher s’appelle composants intelligents ou conteneurs. Les données peuvent provenir de redux, d’accessoires ou de tout appel réseau.

Les composants stupides / de présentation sont ceux qui sont responsables de la présentation des données reçues.

Bon article avec exemple ici

https://www.cronj.com/blog/difference-container-component-react-js/

Les composants construisent une piace de la vue, donc il doit rendre les éléments DOM, mettre le contenu à l’écran.

Les conteneurs participent à l’élaboration des données, il convient donc de “parler” avec redux, car il faudra modifier l’état. Donc, vous devriez inclure connect (react-redux) ce qu’il fait la connexion, et les fonctions mapStateToProps et mapDispatchToProps :

 . . . import { connect } from "react-redux"; class myContainer extends Component { } function mapStateToProps(state) { // You return what it will show up as props of myContainer return { property: this.state.property }; } function mapDispatchToProps(dispatch) { // Whenever property is called, it should be passed to all reducers return bindActionCreators({ property: property }, dispatch); } export default connect(mapStateToProps, mapDispatchToProps)(myContainer); 

Ce sont les deux composants les conteneurs sont fonctionnels, ils ne rendent donc pas le HTML par eux-mêmes, et vous avez également des composants de présentation, où vous écrivez le code HTML réel. Le conteneur a pour but de mapper l’état et l’envoyer aux accessoires pour le composant de présentation.

Lectures complémentaires: Lien

Réagir, Redux sont des bibliothèques indépendantes.

React vous fournit un cadre pour la création de documents HTML. Les composants représentent en quelque sorte une partie particulière du document. Les méthodes associées à un composant peuvent alors manipuler la partie très particulière du document.

Redux est un framework qui prescrit une philosophie spécifique pour le stockage et la gestion des données dans les environnements JS. C’est un gros object JS avec certaines méthodes définies, le meilleur usage se présente sous la forme de la gestion de l’état d’une application Web.

Étant donné que React prescrit que toutes les données doivent passer de la racine aux feuilles, il devient fastidieux de maintenir tous les accessoires, de définir les accessoires dans les composants et de transmettre les accessoires à certains accessoires. Cela rend également l’état de l’application entière vulnérable.

React Redux offre une solution propre, où il vous connecte directement au magasin Redux, en enroulant simplement le composant connecté autour d’un autre composant React (votre Container ). Étant donné que dans votre implémentation, votre implémentation a déjà défini quel élément de l’état complet de l’application est nécessaire. Ainsi, connect ces données à un magasin et transmettez-les comme accessoires au composant qui les entoure.

Considérons cet exemple simple:

  class Person extends Component { constructor(props){ this.name = this.props.name; this.type = this.props.type; } render() { return 

My name is {this.name}. I am a doctor { this.type }

} } const connect = InnerComponent => { class A extends Component{ render() { return } } A.displayName = `Connect(${InnerComponent.displayName})` return A }

connect fonction connect passe un type prop.

De cette façon, une connexion sert de conteneur pour le composant Personne.