Differenza tra componente e contenitore nel reagente redux

Qual è la differenza tra componente e contenitore in reagire redux?

Componentfa parte dell'API di React. Un componente è una classe o una funzione che descrive parte dell'interfaccia utente di React.

Contenitore è un termine informale per un componente di React che viene connecttrasferito in un negozio di redux. I container ricevono aggiornamenti e dispatchazioni sullo stato Redux e di solito non eseguono il rendering degli elementi DOM; delegano il rendering ai componenti secondari di presentazione .

Per maggiori dettagli leggi i componenti di presentazione e contenitore di Dan Abramov.

Il componente responsabile del recupero dei dati e della visualizzazione è chiamato componenti smart o container. I dati possono provenire da redux, qualsiasi chiamata di rete o abbonamento di terze parti.

I componenti stupidi / di presentazione sono quelli che sono responsabili della presentazione della vista in base agli oggetti di scena ricevuti.

Buon articolo con esempio qui

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

I componenti costruiscono un aspetto gradevole della vista, quindi dovrebbe eseguire il rendering degli elementi DOM, mettere il contenuto sullo schermo.

I contenitori partecipano all'elaborazione dei dati, quindi dovrebbe "parlare" con redux, perché dovrà modificare lo stato. Quindi, dovresti includere connect (reply-redux) ciò che rende la connessione e le funzioni mapStateToProps e 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);

componenti

I componenti ti consentono di dividere l'interfaccia utente in pezzi indipendenti e riutilizzabili e di pensare a ciascun pezzo in isolamento. A volte vengono chiamati "componenti di presentazione" e la preoccupazione principale è l' aspetto delle cose

contenitori

I contenitori sono esattamente come i componenti senza interfaccia utente e i contenitori si occupano di come funzionano le cose. . Parla principalmente con l'archivio redux per ottenere e aggiornare i dati

vedere il confronto delle tabelle dal documento Redux

Spiegazione dettagliata https://redux.js.org/basics/usage-with-react#presentational-and-container-components

Sono entrambi componenti; i contenitori sono funzionali, quindi non eseguono il rendering di alcun HTML da soli e quindi si hanno anche componenti di presentazione, in cui si scrive l'html effettivo. Lo scopo del contenitore è mappare lo stato e inviarlo ai puntelli per il componente di presentazione.

Ulteriori letture: Link

React, Redux sono librerie indipendenti.

React ti fornisce un framework per la creazione di documenti HTML. I componenti rappresentano in qualche modo una parte particolare del documento. I metodi associati a un componente possono quindi manipolare la parte molto particolare del documento.

Redux è un framework che prescrive una filosofia specifica per l'archiviazione e la gestione dei dati negli ambienti JS. Si tratta di un unico grande oggetto JS con determinati metodi definiti, il miglior caso d'uso si presenta sotto forma di gestione dello stato di un'app Web.

Poiché React prescrive che tutti i dati dovrebbero fluire dalla radice alle foglie, diventa noioso gestire tutti gli oggetti di scena, definendo oggetti di scena in componenti e quindi passando oggetti di scena a determinati oggetti ai bambini. Inoltre, rende vulnerabile l'intero stato dell'applicazione.

React Redux offre una soluzione pulita, in cui ti collega direttamente al negozio Redux, semplicemente avvolgendo il componente collegato attorno a un altro componente React (il tuo Container). Dal momento che nella tua implementazione, la tua implementazione hai già definito quale parte dell'intero stato dell'applicazione è richiesta. Quindi connecttoglie quei dati dal negozio e li passa come oggetti di scena al componente che si avvolge.

Considera questo semplice esempio:

 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 funzione passa un puntello type.

In questo modo una connessione funge da contenitore per il componente Persona.

React ha due componenti principali: il primo è il componente intelligente (contenitori) e il secondo è stupido (componente di presentazione). I contenitori sono molto simili ai componenti, l'unica differenza è che i contenitori sono a conoscenza dello stato dell'applicazione. Se parte della tua pagina web viene utilizzata solo per la visualizzazione di dati (stupido), rendila un componente. Se ne hai bisogno per essere intelligente e consapevole dello stato (ogni volta che i dati cambiano) nell'applicazione, rendilo un contenitore.