javascript - Diferencia entre componente y contenedor en react redux

reactjs

Question

¿Cuál es la diferencia entre componente y contenedor en react redux?

Answer 1

Ambos son componentes; los contenedores son funcionales, por lo que no representan ningún html por sí solos, y luego también tiene componentes de presentación, donde escribe el html real. El propósito del contenedor es mapear el estado y enviarlo a los accesorios para el componente de presentación.

Lectura adicional: enlace

Answer 2

El componente responsable de recuperar datos y mostrarlos se denomina componentes inteligentes o contenedores. Los datos pueden provenir de redux, cualquier llamada de red o suscripción de terceros.

Los componentes tontos / de presentación son los responsables de presentar la vista en función de los accesorios recibidos.

Buen articulo con ejemplo aqui

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

Answer 3

Los componentes construyen una parte de la vista, por lo que debe representar elementos DOM, poner contenido en la pantalla.

Los contenedores participan en la elaboración de datos, por lo que debe "hablar" con redux, ya que tendrá que modificar el estado. Por lo tanto, debe incluir connect (react-redux) lo que hace la conexión, y las funciones mapStateToProps y 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

Reaccionar, Redux son bibliotecas independientes.

React le proporciona un marco para crear documentos HTML. Los componentes representan de alguna manera una parte particular del documento. Los métodos asociados con un componente pueden manipular la parte muy particular del documento.

Redux es un marco que prescribe una filosofía específica para almacenar y administrar datos en entornos JS. Es un gran objeto JS con ciertos métodos definidos, el mejor caso de uso viene en forma de administración de estado de una aplicación web.

Dado que React prescribe que todos los datos deben fluir de la raíz a las hojas, resulta tedioso mantener todos los accesorios, definir los accesorios en los componentes y luego pasar los accesorios a ciertos accesorios a los niños. También hace que todo el estado de la aplicación sea vulnerable.

React Redux ofrece una solución limpia, donde lo conecta directamente con la tienda Redux, simplemente envolviendo el componente conectado alrededor de otro Componente React (su Container ). Como en su implementación, su implementación ya definió qué parte del estado de la aplicación completa necesita. Así que connect saca esos datos de la tienda y los pasa como accesorios al componente que lo envuelve.

Considere este simple ejemplo:

 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 función de connect pasa un type utilería.

De esta forma, una conexión actúa como contenedor para el componente Persona.

Answer 5

React tiene dos componentes principales: el primero es el componente inteligente (contenedores) y el segundo es tonto (componente de presentación). Los contenedores son muy similares a los componentes, la única diferencia es que los contenedores conocen el estado de la aplicación. Si parte de su página web solo se usa para mostrar datos (tontos), hágalo un componente. Si necesita que sea inteligente y esté al tanto del estado (siempre que los datos cambien) en la aplicación, hágalo un contenedor.

Answer 6

Component es parte de la API React. Un componente es una clase o función que describe parte de una interfaz de usuario de React.

Contenedor es un término informal para un componente Reaccionar que está connect a una tienda redux. Los contenedores reciben actualizaciones de estado de Redux y acciones de dispatch , y generalmente no representan elementos DOM; delegan la representación a componentes secundarios de presentación .

Para obtener más detalles, lea los componentes de presentación vs contenedor por Dan Abramov.