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 :)