RxJS’nin React ile Kullanımı

RxJS reaktif programlamayı uygulamaya dökmemizi sağlayan bir kütüphanedir. React ile bileşenler arası haberleşme de RxJS’nin sunduğu subje(subject) mantığı kullanılabilir. Bir yönüyle RxJS kütüphanesinin bu şekilde kullanımı, state yönetim kütüphanelerinin ve React’ın sunduğu bağlam yönteminin(Context API) yerine geçmektedir.

React & RxJS

RxJS Nedir ?

RxJS Javascript ile reaktif uygulamalar geliştirmemizi sağlayan kütüphanedir. Birçok dilde uygulamaları bulunur. Reaktif programlama veri akışlarına, değişimin izlenmesi ve yayılmasına bağlı programlama paradigmasıdır. Reaktif programlama genellikle yoğun olay (event) tabanlı ve asenkron işleme dayalı uygulamalarda kullanılır. RxJS kütüphanesi reaktif programlama paradigmasını sunmaktır. Reaktif uygulamalarda veriyi yayınlayan ve dinleyen birimler vardır. Bunlara gözlemlenebilir(observable) ve gözlemci(observer) denir. Gözlemci, gözlemlenebilir birime abone olur ve herhangi bir değişiklikte gözlemlenebilir bileşen tarafından uyarılırlar. Basit anlatımla gözlemlenebilir birimler veri akışı yapan bileşenler, gözlemciler bu veri akışını dinleyen bileşenler olarak düşünülebilir.

RxJS Terimleri

Observable: Gözlemlenebilir bileşen.

Observer: Gözlemlenebilir bileşene abone olan gözlemleyen birim.

Subject: Birden fazla gözlemleyen bileşene veri akışı yapan (multicast) bir çeşit observer.

Subscription: Observer bileşenlere abone olma işlemi. Observer bileşenlerin çalıştırılması olarak düşünülebilir.

Operators: Observer tarafından sunulan veri akışı üzerinde değişiklik yaparak tekrar değiştirilmiş veri akışını tekrar yayınlamayı sağlayan saf fonksiyonlardır(Yan etkilerden bağımsız.).

Schedulers: Eş zamanlılığı kontrol etmek için kullanılırlar. Örneğin bir veri akışının geciktirilmesi.

Burada dikkat edilmesi gereken önemli nokta herhangi bir gözlemlenebilir bileşene abone olduğunda gözlemlenebilir bileşen her abone olan gözlemci için ayrı çalışır. Aynı anda iki gözlemci, gözlemlenebilir bileşene abone olursa birbirlerinden etkilenmezler. Gözlemlenebilir bileşenler herhangi bir gözlemci abone olmadan çalışmazlar.

Subjeler(Subjects) ise herhangi bir gözlemci ona abone olmadan veri akışı yapabilir ve gözlemciler öncesinde yayınlanan veri akışını kaçırabilirler. Gözlemciler sadece abone olduktan sonra veri akışını alırlar. Subjeler gözlemcilerden bağımsız olarak veriyi yayınlarlar. Bu yönüyle subjeler konserlere benzetilebilirler siz gitsenizde gitmesenizde konser devam etmektedir ve siz olanları gittikten sonra fark edebilirsiniz.

RxJS ile ilgili detaylı bilgi almak için: RxJS

Reaktif programlama hakkında detaylı bilgi için: What is Reactive programming ?

Projenin Oluşturulması ve RxJS’nin Yüklenmesi

Örnek projede iki adet bileşen RxJS’nin sunduğu subje mantığı ile haberleşmektedir. İçinde metin kutusu (input) barındıran bileşen metin kutusu her değiştiğinde subje üzerinden veriyi diğer bileşene aktarmaktadır. Diğer bileşen ise bu veriyi subje üzerinden izleyerek değişim olduğunda state objesini güncellemektedir. Örnek projede dil olarak typescript kullanılmaktadır. RxJS typescript ile stabil çalışmaktadır.

Projenin Oluşturulması

Proje ilk olarak create-react-app ile yarn veya npx kullanılarak oluşturulur:

npx create-react-app react-with-rxjs --template typescript
yarn create react-app react-with-rxjs --template typescript

RxJS’nin Yüklenmesi

NPM veya Yarn kullanılarak RxJS projeye eklenir:

npm install rxjs
yarn add rxjs

Dizin Yapısının Oluşturulması

Projenin dizin yapısı aşağıdaki şekilde kurulur:

./react-with-rxjs
|  |-- Contexts/
|  |-- Components/
|  |-- package.json

Bu dizin yapısında Components/ klasöründe haberleşmeyi yapan React bileşenlerimiz, Context/ altında ise RxJS subjesini oluşturan ve subjeyi bütün bileşenlere sunan React bağlamı bulunmaktadır. Bağlamlar ile ilgili detaylı bilgi almak için : React Context API

RxJS Subjesinin Oluşturulması ve Kullanılması

RxJS subjesi uygulamamızda bir bağlam tarafından oluşturulup tüm uygulamaya sunulmaktadır. Bunun için Contexts/ dizini içerisinde AppContext.tsx dosyasına:

Burada 9. satırda iletişim için kullanacağımız subjemizi oluşturuyoruz. 13. satırda subje objesine bütün bileşenlerde erişebilmek için bağlam (Context) oluşturuyoruz.

Oluşturduğumuz bağlamın uygulama geneli sunulması gerekmektedir. Bunun için index.tsx dosyasından export ettiğimiz AppContextProvider bileşeni çağırılmalıdır:

10. Satırda, AppContextProvider en üst bileşen olarak tanımlanarak bağlamın sunduğu veriler App bileşeni ve onun alt bileşenlerine sunulmaktadır.

Haberleşme Yapan Bileşenlerin Oluşturulması

Haberleşme olarak bir bileşen diğerine metin kutusunda yapılan değişiklikleri göndermektedir. Gönderme işlemini yapan bileşen için Components/ dizininde InputBox.tsx dosyası aşağıdaki gibi oluşturulur:2

Burada metin kutusunun değişme event’i ile subjemizden metin kutusunun içeriği 10. satırda gönderilmektedir. next fonksiyonu ile subjeyi dinleyen her observer’a veri akışı gerçekleşir. 6. Satırda useContext hook’u ile bağlamın sunduğu service objesini (yani subje) almaktayız.

Veri akışını alan ve gösteren bileşen Components/ dizininde TextField.tsx dosyasında oluşturulur:

İlk olarak gerekli service objemiz bağlamdan(AppContext) useContext fonksiyonu ile dinlenir. useEffect hook’u içerisinde subjeye abone olunur. Abone olunduktan sonra bileşen mesajları almaya başlamaktadır. Herhangi bir mesaj geldiğinde bu 15. satırda text state objesine atılır. Ayrıca bellek açıkları ve olası hatalar için useEffect’in temizleme(cleanup) fonksiyonunda abonelikten çıkılır.

Böylelikle iki bileşen arası RxJS subjesi yardımıyla haberleşme sağlanır. Bu yapı ile herhangi iki veya daha fazla bileşen arasında haberleşme sağlanabilir. Ayrıca gelişmiş RxJS yapılarıyla( Schedulers, Operators) daha spesifik işlemler yapılabilir.

Kaynak Kodlar

Projenin kaynak kodlarına GIT üzerinden erişebilirsiniz. Ayrıca git komutu ile projeyi indirip yüklemek için:

git clone https://github.com/Spelchure/react-with-rxjs.git
cd react-with-rxjs
yarn
yarn start