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

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

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.

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/

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);

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

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

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

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.

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.