React Native ve Mobx Kullanımı

Bu yazıda react native uygulamalarımız da mobx kullanımını anlatacağım. Mobx, redux gibi state yönetiminde kullanacağız redux a görede daha kolay ve öğrenilebilir bir yapısı var. Çalışma mantığı: Store da observable olarak oluşturduğumuz state leri action lar ile güncellediğimiz de react tarafında render ediyor. Dört ana bileşenimiz var store, observable, observer ve action bunlar teoride: Store observable state leri ve action methodlarını barındırır, güncellenecek stateler observable olarak store da tanımlanır, observer mobx işlemlerini yapacak class ları takip eder, action observable state de işlem yapmamızı sağlar. Bunları teknikte incelemek için kurulumla devam edelim.

Öncelikle babel plugini yükleyeceğiz çünkü mobx yazarken es7 decorators kullanacağız kullanımı da basit.

Babel pluginini yükledikten sonra mobx ve mobx-react ı indiriyoruz.

Yüklemeleri bitirdikten sonra .babelrc dosyasına plugini ekliyoruz.

React-native Version 0.56.0+

React native 0.56.0 versiyonunu veya daha yeni bir versiyon kullanıyorsanız babel pluginin farklı versiyonunu yüklemelisiniz. Aksi taktirde hata alırız detay için bkz. aynı hatayı bende yaşadım basit bir çözümü var: babel-plugin-transform-decorators-legacy yerine “@babel/plugin-proposal-decorators”: “^7.1.2” yüklüyoruz ve .babelrc dosyasında plugin kısmını aşağıdaki gibi güncelliyoruz.

 

Artık kod kısmına geçebiliriz uygulamanın ana dizininde mobx adlı bir klasör oluşturup içinde Store.js javascript dosyası oluşturalım aşağıdaki kodları yazıp inceleyelim.

Store.js

İlk önce mobx ten observable ve action ı import ediyoruz. Sonra Store adlı bir class oluşturup içerisinde mobx işlemlerini yapıp class ı export ettik. Store da ilk önce state timizi observable olarak belirledik, değişkenin önüne @observable yazarak belirlemiş oluyoruz aynı durumu aciton da da yaptık method ların başına @action yazarak action olarak belirttik.

Observable statetimizi count diye isimlendirip initial value sini 1 olarak belirledik. Sonra ilk methodumuzu yazdık increment isimli, burada count statetini 1 arttırıyoruz. Başına @action yazarak ta action olduğunu belirttik. Decrementte aynı mantıkta count ı 1 azaltan action dır.

React kısmına geçebiliriz App.js dosyasında kodlarımızı yazalım.

App.js

Kodu incelersek (temel ve stillendirme kısımlarını geçiyorum):

  1. İlk olarak mobx-react tan observer ı import ediyoruz sonra class ın önüne @observer olarak tanımlıyoruz eğer tanımlamazsak class ta yaptığımız güncellemler ekranda render edilmez.
  2. Yazdığımız Store.js i import edip içindekilere ulaşıyoruz örneğin: Store.count yazarak state teki veriyi alıyoruz.
  3. Bir Text te count un datasını yazdırdık.
  4. İki tane buton oluşturup tıklandıklarında Store daki actionları tetikledik. (örneğin: Store.increment())

Örnek uygulamamız bu kadar çalışma mantığı: ekranda sayıyı gösterdik, sayıyı arttırabilmek ve azalta bilmek için 2 adet buton oluşturduk incremente tıklandığında 1 artıyor decremente tıklandığında 1 azalıyor.

Yazı bu kadar özetlemek gerekirse; mobx in ne olduğundan, çalışma sisteminden, observable action tarzı kavramlardan bahsettik ve örnek bir uygulama geliştirdik. Yakın zamanlarda bir videoda çekmeyi düşünüyorum.

By Batuhan Akkaya
06 Kasım 2017