web-dev-qa-db-fra.com

Différence entre le composant et le conteneur dans react redux

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

javascriptreactjsredux
68
Stanislav Mayorov

Component fait partie de l’API de 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 un composant React qui est connect- dans un magasin redux. Les conteneurs reçoivent les mises à jour de l’état Redux et les actions dispatch et ne rendent généralement pas les éléments DOM; ils délèguent le rendu aux composants enfants presentationational.

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

83
joews

Le composant chargé d'extraire et d'afficher les données est appelé composant intelligent ou composant de conteneur. Les données peuvent provenir de redux, d'accessoires ou de tout appel réseau. 

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

Bon article avec exemple ici 

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

5
Akash Bhandwalkar

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

Lectures supplémentaires: Link

2
lysdexic

Les composants construisent une trace de la vue, il doit donc restituer les éléments DOM, mettre le contenu à l'écran.

Les conteneurs participent à l’élaboration des données, il faut donc "parler" avec redux, car il faudra modifier l’état. Vous devez donc inclure connect (react-redux) ce qu’il établit 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);
2
J C

React, 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 ensuite manipuler la partie même du document.

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

Comme React prescrit que toutes les données doivent circuler de la racine aux feuilles, il devient fastidieux de conserver tous les accessoires, de définir les accessoires dans les composants, puis de transmettre les accessoires à certains accessoires aux enfants. Cela rend également l'état entier de l'application vulnérable.

React Redux offre une solution propre, dans laquelle il vous connecte directement au magasin Redux, en enroulant simplement le composant connecté autour d'un autre composant React (votre Container). Depuis lors de votre implémentation, vous avez déjà défini quelle partie de l’état complet de l’application vous avez besoin. Donc, connect prend ces données hors du magasin et les transmet comme accessoires au composant qu’il s’enveloppe lui-même.

Considérez 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 la fonction passe un prop type.

De cette façon, une connexion agit en tant que conteneur pour le composant Personne.

1
nirbhaygp

React a deux composants principaux: le composant intelligent (conteneurs) et le second (composant de présentation). Les conteneurs sont très similaires aux composants, la seule différence est que les conteneurs sont informés de l'état de l'application. Si une partie de votre page Web est uniquement utilisée pour afficher des données (dumb), faites-en un composant. Si vous en avez besoin pour être intelligent et conscient de l'état (à chaque fois que les données changent) dans l'application, faites-en un conteneur.

0
Neel Patel