Diferença entre componente e contêiner no Reaux Redux

Qual é a diferença entre componente e container no react redux?

Componentfaz parte da API do React. Um componente é uma classe ou função que descreve parte de uma interface do usuário do React.

Contêiner é um termo informal para um componente React que é connectenviado para um repositório redux. Os contêineres recebem atualizações e dispatchações do estado Redux , e geralmente não processam elementos DOM; eles delegam a renderização aos componentes filho da apresentação .

Para mais detalhes, leia os componentes da apresentação versus o contêiner de Dan Abramov.

O componente responsável por buscar dados e exibir é chamado de componentes inteligentes ou de contêiner. Os dados podem ser provenientes de redux, qualquer chamada de rede ou assinatura de terceiros.

Os componentes burros / de apresentação são aqueles responsáveis ​​por apresentar a exibição com base nos objetos recebidos.

Bom artigo com exemplo aqui

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

Os componentes constroem uma aparência da vista; portanto, ele deve renderizar elementos DOM, colocar conteúdo na tela.

Os contêineres participam da elaboração dos dados; portanto, eles devem "conversar" com o redux, pois precisará modificar o estado. Portanto, você deve incluir connect (react-redux) o que faz a conexão e as funções 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);

Componentes

Os componentes permitem que você divida a interface do usuário em partes independentes e reutilizáveis, e pense sobre cada parte isoladamente. Eles são chamados de "componentes de apresentação" e a principal preocupação é como as coisas parecem

Recipientes

Os contêineres são como componentes sem interface do usuário e os contêineres estão preocupados com o funcionamento das coisas. . Ele fala principalmente com a loja redux para obter e atualizar os dados

veja a comparação de tabela do documento Redux

Explicação detalhada https://redux.js.org/basics/usage-with-react#presentational-and-container-components

Ambos são componentes; Os contêineres são funcionais; portanto, eles não renderizam nenhum html por si próprios e, em seguida, você também possui componentes de apresentação, nos quais você escreve o html real. O objetivo do contêiner é mapear o estado e enviar para adereços para o componente de apresentação.

Leitura adicional: Link

React, Redux são bibliotecas independentes.

O React fornece uma estrutura para a criação de documentos HTML. Os componentes representam uma parte específica do documento. Os métodos associados a um componente podem então manipular a parte muito específica do documento.

Redux é uma estrutura que prescreve uma filosofia específica para armazenar e gerenciar dados em ambientes JS. É um grande objeto JS com certos métodos definidos, o melhor caso de uso vem na forma de gerenciamento de estado de um aplicativo Web.

Como o React prescreve que todos os dados devem fluir da raiz para as folhas, torna-se entediante manter todos os adereços, definindo adereços em componentes e passando adereços para determinados adereços para crianças. Também torna todo o estado do aplicativo vulnerável.

O React Redux oferece uma solução limpa, onde ele se conecta diretamente ao repositório Redux, simplesmente envolvendo o componente conectado em torno de outro React Component (seu Container). Como em sua implementação, você já definiu qual parte de todo o estado do aplicativo você precisa. Portanto, connectretira esses dados da loja e os transmite como adereços para o componente que os envolve.

Considere este exemplo simples:

 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
 }

connectA função passa um suporte type.

Dessa forma, uma conexão atua como contêiner para o componente Pessoa.

O React possui dois componentes principais: o primeiro é o componente inteligente (contêineres) e o segundo é o mudo (componente de apresentação). Os contêineres são muito semelhantes aos componentes, a única diferença é que os contêineres estão cientes do estado do aplicativo. Se parte da sua página da web for usada apenas para exibir dados (idiota), torne-o um componente. Se você precisar que ele seja inteligente e esteja ciente do estado (sempre que os dados forem alterados) no aplicativo, torne-o um contêiner.