MobX ile Flutter State Yönetimi

Herkese merhaba! Bugün, flutter geliştiriciliğinde kullanılan ve bir çok geliştirici tarafından beğenilen MobX paketinden bahsedeceğim.

MobX Nedir ?

MobX, uygulamanızın reaktif verilerini UI (veya herhangi bir gözlemci) ile yönetimi kolaylaştıran bir state yönetim kütüphanesidir.

Neden MobX En İyi Paket Hangisi ?

Açıkçası bunun genel bir doğruluğu yok. Daha doğrusu flutter için yayınlanan bir çok state management paketleri içinde bu kesinlikle en iyisidir, bu daha iyidir gibi bir iddanın doğru olacağını düşünmüyorum. Sizin için en kolayı her zaman en iyisidir diyerek devam ediyorum.🥱

MobX Genel Bakış

• Observable ( Dinleyici )
• Action ( Aksiyon )
• Reaction ( Reaksiyon )

Peki nedir bu observable, action ve reaction kavramları.

MobX paketinin çalışma mantığını gerçekle hayat ile örnek vermek gerekirse. Araba kullandığımız bir senaryo düşünelim. Bu senaryoda

• Arabamız = Observable yani dinleyici
• Trafik Lambası = Action yani aksiyonu belirleyen ana unsur.

Arabamız ile trafik lambalarının ışıklarını bekler ve onların aksiyonlarına göre( yani ışıklarına göre ) dinleyici olarak farklı durumlara geçeriz. Yani arabamız ile trafik lambasını dinlerken bize ne yapmamızı gerektiğini söyleyen, yönlendiren trafik lambasıdır.

Reaction ise observable durumunu dinleyen ve her değişikliğinde bir tepki ortaya koyan parçalardır. Bu kadar anlatımdan sonra biraz kod yazalım ve yukardaki kavramları pekiştirelim.

MobX ile Sayaç Uygulaması

Bu örnekte basit bir sayaç uygulaması yazacağız. Sayı 10 ve üstü ise ekranda 10 limitini aştınız değilse henüz limiti aşmadınız şeklinde mesaj göstereceğiz. Tabi ki bu state değişikliğini MobX ile yöneteceğiz.😊

• MobX için gerekli paketleri pubspec.yaml dosyamıza ekleyelim.

• @Observable, @Action ve @Computed gibi annotationları tanımlamak için bir classı oluşturmalıyız (Store sınıfı bir mixin).
• Bu örnekte @computed ile ilgili bir örneğimiz olmayacak fakat computedin anlamını açıklamak gerekir ise, değişkenlerin birleşiminden meydana gelen başka bir değişken diyebiliriz. Örnek vermek gerekirse name ve username isimli 2 değişkenimiz olsun kimlikBilgisi isimli değişkenimiz ise bize name+username birleşimini verdiğini düşünebiliriz. Aşağıda computed ile ilgili kısa bir örnek verilmiştir.

MobX için değişkenlerimizi barındıracağımız sınıfı oluşturuyoruz.

• Sınıfımızı oluşturduktan sonra değişkenlerimizi tanımlıyoruz.

1.Adımda disposer isimli bir liste tanımlıyoruz. ReactionDisposer tipinde değerleri alacak. Bunlar bizim uygulama içinde kullanacağımız reactionları toplu şekilde listede barındıracaktır.

2.Adımda setup fonksiyonunu tanımlıyoruz. Bu fonksiyon içinde _disposer isimli listemize bir adet reaction ekliyoruz. Reaction(1.parametre hangi değişkene göre reaksiyon verecek biz burada sayı değişkenini belirttik bu şekilde sayı değişkeni her değiştiğinde 2. parametredeki fonksiyonumuz çalışacak, 2. parametre ise bu her değişiklikte hangi reaksiyonu göstereceğimizi belirlediğimiz kısım. Bu kısım bir void callback).

3.Adımda sayı isimli değişken değiştiği zaman ne yapacağımızı belirliyoruz.

4.Adımda dispose fonksiyonu ise _disposer listesi içinde bulunan tüm reactionları kapatan bir fonksiyon. Burası önemli çünkü bir leak olmasını istemeyiz ve açtığımız her reactionu mutlaka sayfa kapanışında kapatmalıyız.

5.Adımda dinlenecek değişkenlerimizi @observable ile işaretlemeliyiz. Aynı şekilde @observable ile işaretlenen değişkenlerin anlık olarak güncellenmesini sağlayan fonksiyonlarımızın başına @action eklemeliyiz.

Artık uygulamamızda @observable olan değişkenleri dinleyebilir ve @action ile işaretlenen fonksiyonlarımızı çalıştırdığımız zaman değişiklikleri anlık olarak alabiliriz.

Tüm bu işlemlerden sonra build_runner çalıştırıp dosyamızı oluşturmasını sağlıyoruz. Çalıştırılacak terminal kodu :

flutter packages pub run build_runner build

Bu işlemden sonra build runner bizim için test_store.g.dart isimli dosyayı oluşturacaktır. Oluşan dosyaya müdahale etmeyiniz. Her TestStore sınıfında değişiklik yaptığınız zaman bu terminal kodunu çalıştırıp dosyayı güncellemeniz gerekecektir.

TestStore Sınıfın Tam Hali

• Şimdi geçelim ekran kodlarımıza. Ekranımız bu şekilde gözükecektir.

Ekran Kodlarımız

Adım adım gidelim.

1.Adımda öncelikle sayfamızı oluşturup TestStore tipinden bir nesne yarattık.

2.Adımda initState içinde setup() fonksiyonumuzu çalıştırdık. Burası önemli çünkü bu fonksiyonumuz aslında reactionların tetiklenmesini sağlıyor. Bir kere çalışması yeterli ve çalıştıktan sonra silene kadar bu reaction hafızada durmaya devam edecektir.

3.Adımda dispose içinde kendi store sınıfımızın içinde kendi yazdığımız dispose() fonksiyonumuzu çağırdık. Bu fonksiyon ekran kapandıktan sonra açık olan tüm reactionları kapatacaktır. Amacımız leak oluşumunu engellemektir.

4.Adımda geri kalan kısımda ise klasik flutter mevcuttur fakat dikkat ettiyseniz bir sınıfı daha önceden hiç görmedik. Observer() bu sınıf bize mobx tarafından sağlanmaktadır. Görevi ise TestStore sınıfımızdaki @observable olarak işaretlenen değişkenleri dinlemek ve bize bildirmektir. Bildirilen değeri anlık olarak ekranda göstermek için gösterilen widgetlarımızı Observer() ile sarmalamamız gerekmektedir.

Observer ile widgetlarınızı sarmalamazsanız değişiklikler ekranınızda gözükmeyecektir.

ve bu kadar. Artık uygulamamızı çalıştırabiliriz. 🥳🥳🥳

Bir sonraki yazıda ise MobX paketini daha detaylı bir şekilde ele alıp internetten veri çeken, ekranda bu verileri gösteren ve bu verilerin farklı sayfalarda anlık olarak değişen bir uygulama yapacağız.

Bir sonraki yazıya kadar sağlıcakla kalın 😊

MobX dokümantasyonu. https://mobx.netlify.app/

Yazdığımız uygulamanın github adresi.

i-Senku/Example-MobX