Layout de um High Order Component | React parte 1: componentes reutilizáveis para sua webapp

Olá!

Estou realizando o curso e fiquei com uma dúvida na aula que trata dos High Order Components. No curso, uma das soluções apresentadas para o problema de comunicação de componentes é a do "Box", sendo ela elencada como a mais utilizada na comunidade do "React". No exemplo apresentado no curso existe um box chamado "AutorBox", cujo método render() contém o seguinte trecho de código:

  render(){
    return (
      <div>
        <FormularioAutor/>
        <TabelaAutores lista={this.state.lista}/>

      </div>
    );
  }

A minha dúvida é a seguinte: Suponhamos um layout onde se deseja compartilhar informações entre dois componentes que não devam ser apresentados juntos na tela (como é o caso do exemplo apresentado). Como seria possível compartilhar as informações entre ambos componentes utilizando o Box?

Um exemplo disso seria caso fosse necessário, além de atualizar a Tabela Autores, apresentar uma notificação no menu da aplicação. Elas precisariam, necessariamente serem apresentadas juntas no Layout?

Fala Andrew, tudo bem ?

O desenho dos componentes em geral favorece sempre a ideia de uma fonte única de informação (para minimizar problemas na gestão de estados de muitos componentes). A modelagem dos componentes vai ao encontro disso, passando a informação que fica no estado do Box, aos demais filhos que trabalham com os dados via (props) ao invés de definir um novo estado próprio.

Quando se trata de questões como a citada, (quando um componente não necessariamente surge a partir do box, mas mesmo assim precisa de alguma informação deste) existem algumas saídas utilizadas.

É possível usar alguma solução no estilo publisher x subscriber, onde o box, publica eventos (a partir da atualização do seu estado) em um tópico, e qualquer outro componente que se registra nesse tópico consegue reagir a estes eventos lançados. Uma lib muita usada pra isso é a pubsub-js, que inclusive vai ser utilizada na sequência de cursos de react da Alura =)

Uma outra solução muito utilizada pelo mercado é retirar o estado dos componentes e organizá-lo com o auxílio de alguma lib de gerenciamento de estados (redux é praticamente a regra nesse caso). Nesse caso existe uma Store (onde é mantido o estado geral da app, algo como uma arvore), os componentes recebem a referência da Store e utilizam o estado que for conveniente dela, quando um setState é feito, o componente faz um dispatch (despacha) uma ação que será processada gerando um novo estado (e em consequencia a atualização da store), alterando o estado geral, os componente se atualizam por consequencia. Essa ideia de fluxo unidirecional define o padrão flux, e essa é uma das possíveis implementações dele. Ah ele também vai ser feito nas próximas partes da sequencia de cursos de react da Alura =).

Espero ter ajudado. Abraço!

Mergulhe em programação