Patrón de suscriptor de editor en React

Este patrón ha sido solicitado por muchas organizaciones en entrevistas de frontend y también es uno de los patrones que suelo seguir cada vez que tengo que implementar un mecanismo de relación de uno a muchos.

Algunas personas también se refieren a él como Observer Pattern. Para mí, Publisher Subscriber suena más intuitivo, por lo que prefiero referirme a él de esta manera.

¿Qué es el patrón de Suscriptor de editor?

Es un patrón de diseño de comportamiento que le permite definir un mecanismo de suscripción para notificar a varios objetos sobre cualquier evento que le suceda al objeto que están observando o al que están suscritos.

Es útil cuando está interesado en el estado de un objeto y desea recibir una notificación cada vez que haya algún cambio.

El mecanismo de evento y controlador de eventos en JavaScript es la manifestación del patrón de diseño Publisher Subscription/Observer.

Asimismo, consta de 4 conceptos importantes:

1. suscriptores: un mapa de suscriptores donde la clave es el event namey el valor es una matriz de los suscriptores de ese evento. Prefiero el enfoque de un Mapa de Mapas de suscriptores. Explicaré la razón de ello más adelante en este artículo.
2. emit(eventName, data): Un método para notificar a todos los suscriptores sobre la ocurrencia del evento. Algunas personas también prefieren llamarlo publish/notify. Generalmente depende de su caso de uso, cualquier nombre de método le suene más intuitivo
3. subscribe(eventName, handler): Un método para agregar un suscriptor a la matriz de suscriptores
4. unsubscribe(eventName, handler): un método para eliminar el suscriptor respectivo de la matriz de suscriptores

Comprenderemos el funcionamiento de este patrón tomando un ejemplo de creación de un componente de notificación Toast en React.

1. Vamos a crear nuestro mecanismo de suscriptor de editor para el componente Notificación Toast :

2. Además, crearemos nuestro componente Toast Notification , donde agregaremos los suscriptores para dos eventos particulares: showToasty hideToast.

3. Importaremos nuestra notificación Toast en el componente de nivel superior de nuestra aplicación.

4. Ahora, podemos invocar nuestro componente de brindis para mostrar/ocultar notificaciones de cualquiera de los componentes de nuestra aplicación.

He tratado de explicar el funcionamiento con el mejor ejemplo que conozco. Si conoces a otros, ¡compártelos en los comentarios para todos!

Gracias por leer, sígueme para más