Diferencia entre componente y contenedor en react redux

135

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

Stanislav Mayorov
fuente
11
Los contenedores conocen la tienda y transmiten accesorios de estado a los componentes. El único objetivo de los componentes es hacer html, idealmente componentes son apátridas entonces' será más fácil escribir pruebas unitarias
Olivier Boissé

Respuestas:

167

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.

joews
fuente
Es una muy buena explicación. Muy breve y puedo obtener los detalles
Faris Rayhan
Si sigues el enlace, verás que Dan Abromov se ha alejado de este patrón. Dicho esto, todavía estoy considerando las implicaciones del comentario de @ olivier-boisse con respecto a las pruebas.
tim.rohrer
8

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/

Akash Bhandwalkar
fuente
Los datos que provienen de los accesorios no son específicos para el contenedor. Es común para todos los componentes.
Michael Freidgeim
@MichaelFreidgeim De acuerdo. Los accesorios son accesorios para todos.
Akash Bhandwalkar
4

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);
JC
fuente
3

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

ingrese la descripción de la imagen aquí

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

gsaandy
fuente
2

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

NiftyAsp
fuente
1

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.

nirbhaygp
fuente
1

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.

Neel Patel
fuente