React'te Yayıncı Abone Kalıbı

Bu model, birçok kuruluş tarafından ön yüz görüşmelerinde sorulmuştur ve aynı zamanda, bire çok ilişki mekanizması uygulamak zorunda kaldığımda genellikle izlediğim modellerden biridir.

Bazı insanlar da buna atıfta bulunur Observer Pattern. Bana göre, Yayıncı Abone daha sezgisel geliyor, bu yüzden ona bu şekilde atıfta bulunmayı tercih ediyorum.

Yayıncı Abone modeli nedir?

Birden çok nesneyi gözlemledikleri veya abone oldukları nesnenin başına gelen herhangi bir olay hakkında bilgilendirmek için bir abonelik mekanizması tanımlamanıza izin veren davranışsal bir tasarım modelidir.

Bir nesnenin durumuyla ilgilendiğinizde ve herhangi bir değişiklik olduğunda bildirim almak istediğinizde kullanışlıdır.

JavaScript'teki olay ve olay işleyici mekanizması, Yayıncı Aboneliği/Observer tasarım modelinin tezahürüdür.

Aynı şekilde 4 önemli kavramdan oluşur:

1. aboneler: anahtarın olduğu event nameve değerin o etkinliğin abonelerinin bir dizisi olduğu bir abone haritası. Abonelerin bir Haritalar Haritası yaklaşımını tercih ederim. Bunun nedenini bu yazının devamında anlatacağım.
2. emit(eventName, data): Olay oluşumu hakkında tüm aboneleri bilgilendirmek için bir yöntem. Bazı insanlar da onu aramayı tercih ediyor publish/notify. Hangi yöntem adı size daha sezgisel geliyorsa, genellikle kullanım durumunuza bağlıdır.
3. abone ol(eventName, işleyici): aboneler dizisine bir abone eklemek için bir yöntem
4. abonelikten çıkma(eventName, işleyici): İlgili aboneyi aboneler dizisinden kaldırmak için bir yöntem

React'te bir Toast bildirim bileşeni oluşturma örneğini alarak bu kalıbın işleyişini anlayacağız.

1. Tost Bildirimi bileşeni için yayıncı abone mekanizmamızı oluşturalım :

2. Ayrıca, iki özel etkinlik için aboneleri ekleyeceğimiz Tost Bildirimi bileşenimizi oluşturacağız : showToastve hideToast.

3. Tost Bildirimimizi uygulamamızın üst düzey bileşenine aktaracağız .

4. Şimdi, uygulamamızın herhangi bir bileşeninden gelen bildirimi göstermek/gizlemek için tost bileşenimizi çağırabiliriz.

Ben bildiğim en iyi örnekle çalışmayı anlatmaya çalıştım. Başkalarını tanıyorsanız, herkes için yorumlarda paylaşın!

Okuduğunuz İçin Teşekkürler, Daha Fazlası İçin Beni Takip Edin