Padrão de assinante do editor em React

Esse padrão foi solicitado por muitas organizações em entrevistas de front-end e também é um dos padrões que costumo seguir sempre que preciso implementar um mecanismo de relacionamento um-para-muitos.

Algumas pessoas também se referem a ele como Observer Pattern. Para mim, Publisher Subscriber soa mais intuitivo, por isso prefiro me referir a ele dessa forma.

O que é o padrão Publisher Subscriber?

É um padrão de design comportamental que permite definir um mecanismo de assinatura para notificar vários objetos sobre quaisquer eventos que ocorram com o objeto que estão observando ou no qual estão inscritos.

É útil quando você está interessado no estado de um objeto e deseja ser notificado sempre que houver alguma alteração.

O evento e o mecanismo do manipulador de eventos em JavaScript são a manifestação do padrão de design Publisher Subscription/Observer.

Da mesma forma, consiste em 4 conceitos importantes:

1. assinantes: Um mapa de assinantes onde a chave é o event namee o valor é uma matriz dos assinantes desse evento. Prefiro a abordagem de um Mapa de Mapas de assinantes. Vou explicar a razão para isso mais adiante neste artigo.
2. emit(eventName, data): Um método para notificar todos os assinantes sobre a ocorrência do evento. Algumas pessoas também preferem chamá-lo de publish/notify. Geralmente depende do seu caso de uso, qualquer nome de método que pareça mais intuitivo para você
3. Subscribe(eventName, handler): Um método para adicionar um assinante à matriz de assinantes
4. unsubscribe(eventName, handler): Um método para remover o respectivo assinante da matriz de assinantes

Vamos entender o funcionamento desse padrão tomando como exemplo a criação de um componente de notificação do Toast no React.

1. Vamos criar nosso mecanismo de assinante do editor para o componente Toast Notification :

2. A seguir, criaremos nosso componente Toast Notification , onde adicionaremos os inscritos para dois eventos específicos: showToaste hideToast.

3. Importaremos nossa Notificação Toast no componente de nível superior de nosso aplicativo.

4. Agora, podemos invocar nosso componente toast para mostrar/ocultar notificações de qualquer um dos componentes de nosso aplicativo.

Tentei explicar o funcionamento com o melhor exemplo que conheço. Se você conhece outros, compartilhe nos comentários para todos!

Obrigado pela leitura, siga-me para mais