Diferencia entre componente y contenedor en react redux

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

Componentes 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 se connectenvía a una tienda redux. Los contenedores reciben actualizaciones y dispatchacciones del estado de Redux , 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 frente a contenedor de Dan Abramov.

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/

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

Componentes

Los componentes le permiten dividir la interfaz de usuario en piezas independientes y reutilizables, y pensar en cada pieza de forma aislada. A veces se les llama "componentes de presentación" y la principal preocupación es cómo se ven las cosas

Contenedores

Los contenedores son como componentes sin interfaz de usuario y los contenedores se preocupan por cómo funcionan las cosas. . Habla principalmente con la tienda redux para obtener y actualizar los datos.

ver la tabla de comparación de Redux doc

Explicación detallada https://redux.js.org/basics/usage-with-react#presentational-and-container-components

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

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. Entonces, connectsaca 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
 }

connectLa función pasa un accesorio type.

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

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, conviértalo en un contenedor.