React da kendi içerisinde Vue deki gibi bir event tetikleme olayı bulunmamaktadır. Bundan dolayı bu işlemi bizim, kendimizin yapacağı anlamına gelir. Vue da bizim şu an yapacağımız mantıkda çalışmaktadır.
Ilk olarak bir utils klasörü olabilir veya utils benzeri kodları barındırdığınız bir klasör altına events.js veya kendi istediğiniz bir isimde dosya açıyoruz.
const EventEmitter = ,
dispatch: function(event, data){
if(!this.events[event]) return
this.events[event].forEach(callback => callback(data))
},
subscribe: function(event, callback) {
if(!this.events[event]) this.events[event] = []
this.events[event].push(callback)
}
}
module.exports = { EventEmitter }
ilk events objesinde tetiklenmesini istediğimiz fonksiyonları yani eventları barındıracağız.
Subscribe fonksiyonu bizim ilk başta tetiklenmesini istedğimiz fonksiyonları callback olarak gönderdiğimiz vir fonksiyon olacak.
Ilk parametresi event name ikincisi ise callback fonksiyondur.
Mantık şu şekildedir; Eğer events objesinde parametre olarak gelen event name adında bir dizi yoksa o events objesinde o isimde bir dizi oluştur. Bunun amacı eğer birden fazla yerde tetikleme yapılacaksa diziye callback fonksiyonlar atansın diyebiliriz.
Dispatch işlemi ise subscribe fonksiyonu ile parametre olarak gönderdiğimiz callback fonksiyonları çalıştırır. Eğer birden fazla tetiklenecek fonksiyon var ise forEach işlemi içerisinde bu işlemide yapmış oluruz.
Çok kısa kod yapısı ile her zaman kullanabilrceğiniz bir özelliği anlattım. Vue da bu yapı kendi içerisinde var zaten ama eğer Vue da ki bu yapı React ile nasıl yapılacak diye soran olursa umarım cevabını bu yazıda almış olur.
Kaynak :https://lolahef.medium.com/react-event-emitter-9a3bb0c719
