React Native Global Event Handler, WildEmitter Kullanımı

javascriptreact-native

6 yıl önce 3 yorum

Merhaba, react native üzerinde çalışırken eğer bir chat uygulaması yapıyorsanız güncellemeleri nasıl yapacağınızı düşünmüşsünüzdür. Örnek olarak konuşma ekranı açık bir mesaj attınız, sonra konuşma listesine geri geldiğinizde aynı zamanda kullanıcıların son yazdıklarını (last message) görmek istiyorsunuz veya tarihi güncellemek istiyorsunuz. Sırf bunun için değil başka alanlarda da ihtiyacınız oluyor. Başka bir örnek ise chat listesinde bir event başlattınız, herhangi bir kişi çevrimdışı oldu. Ama siz konuşma ekranındasınız ve bunu kullanıcıya bildirmeniz gerekiyor. Peki bir önceki sayfadaki işlemi aynı anda başka sayfalarda yapmak istersek ? İşte uzun lafın kısası burada karşımıza WildEmitter çıkıyor.

WildEmitter kurulumu

Kurulumu WildEmitter github sayfasında var. Ben kullanımından basit bir örnek yapacağım. Npm ile projemize kuruyoruz:

npm install wildemitter --save

Öncelikle projenizin global adındaki değişkenine bir alan eklemeniz gerekiyor. ör:

global.Verici = null; // şu an boş atıyorum 

WildEmitter'ın ihtiyaç duyduğu bir başka şey ise bir fonksiyon. Fonksiyon üzerinde değişiklik yapması gerekiyor. İsmi önemli değil herhangi bir boş fonksiyon olabilir.

function WildEmmiterFunction() {} // içi boş ismi önemli değil istediğiniz ismi verebilirsiniz.

Şimdi fonsiyonumuzu tanıtabiliriz bunun için mixin komutunu kullanmamız gerekiyor. Tabi WildEmitter kütüphanesini dahil ediyoruz, yani tüm işlemler.

import WildEmitter from 'wildemitter';

function WildEmmiterFunction() {}

WildEmitter.mixin(WildEmmiterFunction); // Artık fonksiyonu işaretledik

// Vericimize atamayı yapıyoruz.
global.Verici = new WildEmmiterFunction();

artık projenin diğer yerlerinde Verici diye çağırdığımda erişebilmiş olacağım.

WildEmitter kullanımı

Kurulumu yaptık ve artık işlemlerine bakabiliriz. Önemli olan fonksiyonları şöyle:

/*
 * sayfaYenile adında bir listener tanımlanıyor
 * eğer tetiklenirse callback çağrılacak
*/
Verici.on('sayfaYenile', callback);

/*
 * sayfaYenile adındaki listener'ı kaldırıyor
*/
Verici.off('sayfaYenile');

/*
 * sayfaYenile adındaki listener'ı çalıştırıyor
 * params parametrelerini callback fonksiyonuna atıyor
*/
Verici.emit('sayfaYenile', params);

3 temel fonksiyonu bu işe yarıyor. Örneğin bir butona tıklayınca alert verdirelim ama bunu WildEmitter ile yapacağız:

import React, { Component } from 'react';
import WildEmitter from 'wildemitter';

import {
	AppRegistry,
	View,
	Text,
	TouchableOpacity,
	Alert
} from 'react-native';

/*WildEmmiter*/
function WildEmmiterFunction() {}
WildEmitter.mixin(WildEmmiterFunction);
global.Verici = new WildEmmiterFunction();
/*WildEmmiter*/
export default class TestApp extends Component {

	constructor(props) {
		super(props);
	}

	componentWillMount() {
		// tetiklenince burada yakalıyoruz ver alert vreiyoruz
		Verici.on('alert', function() {
			Alert.alert('Çalıştı');
		});
	}

	componentWillUnmount() {
		// bu view kaldırıldığında listener da silinsin
		Verici.off('alert');
	}

	openAlert() {
		// tetikliyoruz
		Verici.emit('alert');
	}

	render() {
		return (
			<View
				style={{flex: 1}}>
				<TouchableOpacity
					onPress={this.openAlert}>
					<Text>Tıkla</Text>
				</TouchableOpacity>
			</View>
		);
	}
}

AppRegistry.registerComponent('TestApp', () => TestApp);

Burada componentWillMount kullanmam çok önemli çünkü eğer view daha yüklenmeden setState fonksiyonunu çalıştırırsanız, Warning: setState(...): Can only update a mounted or mounting component şekline bir uyarı ile karşılaşırsınız. Bu uyarı daha view oluşmadan veya silindikten sonra state üzerinde bir değişiklik olduğunda çıkar. Bir de componentWillUnmount kullandım. Bu da view kapatıldığında tetiklenir. 

Bugün anlatacaklarım bu kadardı aklınıza takılan bir soru olursa çekinmeyin. Eğer bu konu hakkında veya konu dışı olarak bana soru sormak istiyorsanız https://github.com/abdurrahmanekr/bana-istedigini-sor repository'sinde bir issue açabilirsiniz. Youtube kanalıma abone olarak ve yayınladığım bu makaleyi paylaşarak bana destek olabilirsiniz. Diğer makalelerde görüşmek üzere :)

Yorumlar ({{totalCommentCount}})

  • özer gül

    {{commentLike41Count}} beğenme 6 yıl önce

    dostum böyle bir kütüphane arıyordum konu anlatımı için teşekkür ederim.
    Beğen Beğendin
  • Emir

    {{commentLike169Count}} beğenme 2 yıl önce

    Bu işlem çok bug içerir, Birden fazla sayfanız varsa on olan işlem başka sayfada off olucak geri öncek sayfaya döndüğünüzde ise sorunların başladğını görürsünüz global olarak on off işlemini beğenmedim
    Beğen Beğendin
  • Abdurrahman Eker

    {{commentLike170Count}} beğenme 2 yıl önce

    2021 yılından selamlar! Bu kullanım hala hayat kurtarıyor, global kullanım ve tanımlamalar için çok kontrol gerektirmesi de bir dezavantajı. off yaparken tanımlanan fonksiyonu da vermek gerekiyor aslında. off('event', function) şeklinde. Ama burada anlatılan react yerine function component yapısındaki react versiyonu kullanılırsa useEffect ve hook'lar sayesinde bu sorunlar da ortadan kalkar hale geliyor. React eskisinden daha kolay yazılır hale geldi. Yorumunuz için teşekkürler :)
    Beğen Beğendin
  • Düşündüklerin nedir ?

    Abdurrahman Eker

    (1010 Eylül 11111001100)

  • Full Stack Developer Turkey/Sivas
  • İnternette Avare Kodcu
  • coffee
  • github
  • instagram
  • linkedin
  • youtube
  • Yeni içeriklerden haberdar olmak ister misin ?