Шаблон подписчика издателя в React

Этот паттерн задавали многие организации во время собеседований с клиентами, и он также является одним из паттернов, которым я обычно следую всякий раз, когда мне нужно реализовать механизм отношений «один ко многим».

Некоторые люди также называют его Observer Pattern. Для меня Publisher Subscriber звучит более интуитивно понятно, поэтому я предпочитаю называть его именно так.

Что такое шаблон «Издатель-подписчик»?

Это поведенческий шаблон проектирования, который позволяет определить механизм подписки для уведомления нескольких объектов о любых событиях, происходящих с объектом, за которым они наблюдают или на который они подписаны.

Это полезно, когда вас интересует состояние объекта и вы хотите получать уведомления о любых изменениях.

Механизм событий и обработчиков событий в JavaScript является воплощением шаблона проектирования Publisher Subscription/Observer.

Кроме того, он состоит из 4 важных понятий:

1. подписчики: карта подписчиков, где ключ — это, event nameа значение — массив подписчиков этого события. Я предпочитаю подход Карты Карт подписчиков. Я объясню причину этого позже в этой статье.
2. emit(eventName, data): метод уведомления всех подписчиков о возникновении события. Некоторые люди также предпочитают называть его publish/notify. Как правило, это зависит от вашего варианта использования, какое бы имя метода не звучало для вас более интуитивно.
3. subscribe(eventName, handler): метод добавления подписчика в массив подписчиков
4. unsubscribe(eventName, handler): метод для удаления соответствующего подписчика из массива подписчиков.

Мы поймем, как работает этот шаблон, взяв пример создания компонента уведомления Toast в React.

1. Давайте создадим наш механизм подписки издателя для компонента Toast Notification :

2. Далее мы создадим наш компонент Toast Notification , куда мы добавим подписчиков для двух конкретных событий: showToastи hideToast.

3. Мы импортируем наше всплывающее уведомление в компонент верхнего уровня нашего приложения.

4. Теперь мы можем вызвать наш компонент тоста, чтобы показать/скрыть уведомление от любого компонента нашего приложения.

Я попытался объяснить работу на лучшем известном мне примере. Если вы знаете других, поделитесь в комментариях для всех!

Спасибо за чтение, следуйте за мной, чтобы узнать больше