Différence entre le composant et le conteneur dans React Redux

135

Quelle est la différence entre le composant et le conteneur dans React Redux?

Stanislav Mayorov
la source
11
les conteneurs connaissent le magasin et transmettent les accessoires d'état aux composants. Le seul but des composants est de rendre html, idéalement les composants sont sans état alors ce sera plus facile d'écrire des tests unitaires
Olivier Boissé

Réponses:

167

Componentfait 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 un composant React qui est connecttransféré vers un magasin redux. Les conteneurs reçoivent des mises à jour et des dispatchactions d' état 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 les composants de présentation et de conteneur de Dan Abramov.

joews
la source
C'est une assez bonne explication. Très bref et je peux obtenir le détail
Faris Rayhan
Si vous suivez le lien, vous verrez que Dan Abromov s'est éloigné de ce modèle. Cela dit, je considère toujours les implications du commentaire de @ olivier-boisse concernant les tests.
tim.rohrer
8

Le composant chargé de récupérer les données et de les afficher est appelé composants intelligents ou conteneurs. Les données peuvent provenir de redux, de tout appel réseau ou d'un abonnement tiers.

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

Bon article avec exemple ici

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

Akash Bhandwalkar
la source
Les données provenant des accessoires ne sont pas spécifiques au conteneur. Il est commun à tous les composants.
Michael Freidgeim
@MichaelFreidgeim D'accord. Les accessoires sont des accessoires pour tous.
Akash Bhandwalkar
4

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

Les conteneurs participent à l'élaboration des données, il devrait donc "parler" avec redux, car il aura besoin de modifier l'état. Donc, vous devez 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);
JC
la source
3

Composants

Les composants vous permettent de diviser l'interface utilisateur en éléments indépendants et réutilisables et de penser à chaque élément de manière isolée. Ils sont parfois appelés «composants de présentation» et la principale préoccupation est de savoir comment les choses se présentent

Conteneurs

Les conteneurs sont comme des composants sans interface utilisateur et les conteneurs se préoccupent de la façon dont les choses fonctionnent. . Il parle principalement au magasin redux pour obtenir et mettre à jour les données

voir le tableau de comparaison de Redux doc

entrez la description de l'image ici

Explication détaillée https://redux.js.org/basics/usage-with-react#presentational-and-container-components

gsaandy
la source
2

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

Lectures complémentaires: Lien

NiftyAsp
la source
1

Réagissez, 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 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.

Puisque React prescrit que toutes les données doivent couler de la racine aux feuilles, il devient fastidieux de gérer tous les accessoires, de définir des accessoires dans les composants, puis de transmettre des accessoires à certains accessoires aux enfants. Cela rend également l'ensemble de l'état de l'application 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, votre implémentation, vous avez déjà défini la partie de l'état complet de l'application dont vous avez besoin. Prend donc connectces données hors du magasin et les transmet comme accessoires au composant dont elles sont enveloppées.

Prenons 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
 }

connectla fonction passe un accessoire type.

De cette façon, une connexion agit comme un conteneur pour le composant Personne.

nirbhaygp
la source
1

React a deux composants principaux: le premier est le composant intelligent (conteneurs) et le second est stupide (composant de présentation). Les conteneurs sont très similaires aux composants, la seule différence est que les conteneurs sont conscients de l'état de l'application. Si une partie de votre page Web n'est utilisée que pour afficher des données (stupides), 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.

Neel Patel
la source