Différence entre composant et conteneur dans react redux

Question

Quelle est la différence entre composant et conteneur dans react redux ?

Answer 1

Component fait partie de l'API React. Un composant est une classe ou une fonction qui décrit une partie d'une interface utilisateur React.

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

Pour plus de détails, lisez composantes de présentation et de conteneur par Dan Abramov.

Answer 2

Le composant qui est responsable de la récupération des données et de leur affichage est appelé composant intelligent ou composant conteneur. Les données peuvent provenir de redux, d'un appel réseau ou d'un abonnement tiers.

Les composants muets/présentationnels sont ceux qui sont responsables de la présentation de la vue en fonction des accessoires reçus.

Bon article avec un exemple ici

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

Answer 3

Les composants construisent une partie de la vue, ils doivent donc rendre les éléments DOM et afficher le contenu à l'écran.

Les conteneurs participent à l'élaboration des données, ils doivent donc "parler" avec redux, car ils devront modifier l'état. Donc, vous devriez inclure connecter (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);

Answer 4

Ce sont tous les deux des 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 html réel. Le but du conteneur est de mettre en correspondance l'état et de répartir les props pour le composant de présentation.

Pour en savoir plus : Lien

Answer 5

React et 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 cadre qui prescrit une philosophie spécifique pour le stockage et la gestion des données dans les environnements JS. Il s'agit d'un gros objet JS avec certaines méthodes définies. Le meilleur cas d'utilisation se présente sous la forme de la gestion de l'état d'une application web.

Comme React prescrit que toutes les données doivent descendre de la racine vers les feuilles, il devient fastidieux de gérer tous les props, de définir les props dans les composants puis de passer certains props aux enfants. Cela rend également l'état de l'application tout entier vulnérable.

React Redux offre une solution propre, où il vous connecte directement au magasin Redux, en enveloppant simplement le composant connecté autour d'un autre composant React( votre Container ). Puisque dans votre implémentation, vous avez déjà défini quelle partie de l'état de l'application entière vous avez besoin. Donc connect prend ces données dans le magasin et les transmet en tant que props au composant autour duquel il s'enroule.

Prenez cet exemple simple :

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

  render() {
     return <p> My name is {this.name}. I am a doctor { this.type } </p>
  }
}

 const connect = InnerComponent => { 

   class A extends Component{
     render() {
        return <InnerComponent {...this.props} type="Doctor"/>
     }
   } 
   A.displayName = `Connect(${InnerComponent.displayName})`
   return A
 }

connect passe une prop type .

De cette façon, un connect fait office de conteneur pour le composant Personne.