React Native Uygulamalarında İleri Seviye Veri Akışı: MobX ile Reaktif Programlama Gücü

MobX managing state and data flow in a React Native application, illustrating reactive programming principles

Mobil uygulama geliştirme dünyasında, kullanıcı beklentileri her geçen gün artıyor. Akıcı arayüzler, anlık veri güncellemeleri ve sorunsuz bir deneyim sunmak artık bir lüks değil, standart haline geldi. React Native ile mobil uygulama geliştirirken karşılaştığımız en önemli zorluklardan biri de, uygulamanın karmaşıklığı arttıkça state yönetimini etkili ve verimli bir şekilde yapabilmek. Benim tecrübelerimde, özellikle büyük ölçekli ve dinamik React Native projelerinde, doğru state yönetim kütüphanesini seçmenin uygulamanın gelecekteki bakımını ve ölçeklenebilirliğini doğrudan etkilediğini defalarca gördüm.

Bu yazıda, React Native uygulamalarınızda state yönetimini MobX ile nasıl bir üst seviyeye taşıyabileceğinizi, reaktif programlamanın gücünü kullanarak daha performanslı ve bakımı kolay çözümler geliştireceğinizi derinlemesine inceleyeceğim. Geleneksel yaklaşımların ötesine geçerek, uygulamanızın veri akışını nasıl sadeleştireceğinizi ve kullanıcı deneyimini nasıl iyileştireceğinizi adım adım keşfedeceğiz.

React Native'de State Yönetimi ve Geleneksel Yaklaşımların Sınırları

React Native, bileşen tabanlı yapısıyla state yönetimini bileşen seviyesinde useState veya useReducer gibi Hook'larla yönetmemizi sağlar. Ancak uygulama büyüdükçe, global state ihtiyaçları ortaya çıkar ve bu noktada prop drilling veya Context API gibi çözümler devreye girer. Özellikle küçük ve orta ölçekli uygulamalar için Context API oldukça kullanışlı olsa da, sık güncellenen veya çok sayıda tüketicisi olan büyük state'lerde performans sorunlarına yol açabilir. Çünkü Context her değiştiğinde, onu tüketen tüm bileşenler yeniden render edilir.

Redux gibi kütüphaneler, daha büyük ve karmaşık uygulamalar için merkezi bir state deposu sunarak bu sorunları çözmeyi amaçlar. Ancak Redux'un getirdiği boilerplate kodu (action'lar, reducer'lar, thunk'lar/saga'lar) bazen geliştirme hızını düşürebilir. Benim önceki yazılarımdan biri olan React Native Uygulamalarında Verimli State Yönetimi'nde de bahsettiğim gibi, doğru aracı seçmek projenizin ihtiyaçlarına göre şekillenmelidir.

Illustration depicting the challenges and complexity of state management in React Native, highlighting the limitations of traditional approaches.

MobX Nedir ve Neden React Native İçin Güçlü Bir Alternatiftir?

MobX, JavaScript uygulamalarında state yönetimini basitleştiren, performans odaklı ve reaktif bir kütüphanedir. Temel prensibi, uygulamanızın state'ini gözlemlenebilir (observable) hale getirmek ve sadece bu state değiştiğinde bağımlı olan bileşenlerin otomatik olarak güncellenmesini sağlamaktır. Bu sayede gereksiz yeniden render'lar engellenir ve performans artışı sağlanır.

MobX'in Temel Felsefesi

MobX, bir geliştiricinin uygulamanın state'ini en basit JavaScript veri yapılarıyla tanımlamasına olanak tanır. State'i değiştiren fonksiyonlar (actions) tanımlarsınız ve bu state'i tüketen bileşenler veya türetilmiş değerler (computed values) otomatik olarak güncellenir. Bu, "her şey otomatik, sadece kodu yaz" felsefesiyle Redux'tan farklı bir yaklaşım sunar. Reaktif programlama paradigmasını kullanarak, verideki değişikliklere otomatik olarak tepki veren bir sistem kurmanıza yardımcı olur. Temelde bir Observer deseni uygulamasını andırır.

MobX'in Avantajları

Daha Az Boilerplate Kodu: Redux'a kıyasla çok daha az yapılandırma ve boilerplate kod gerektirir.
Geliştirme Hızı: State yönetimini sadeleştirerek geliştiricilerin iş mantığına daha fazla odaklanmasını sağlar.
Performans: Sadece değişen verilere bağımlı bileşenleri güncelleyerek gereksiz render'ları önler. Bu da özellikle React Native uygulamalarında performans optimizasyonu için kritik bir öneme sahiptir.
Esneklik: Mevcut JavaScript sınıfları ve nesneleri ile kolayca entegre olabilir.
Ölçeklenebilirlik: Büyük ve karmaşık uygulamalarda bile veri akışını yönetmeyi kolaylaştırır.

MobX'in Temel Prensipleri: Nasıl Çalışır?

MobX'i anlamak için dört temel kavramı bilmek gerekir:

1. Observable State (Gözlemlenebilir Durum)

Uygulamanızın temel verileridir. MobX, bu verileri izlenebilir hale getirerek üzerlerindeki değişiklikleri algılar. Bunlar basit değişkenler, nesneler, diziler veya hatta sınıf örnekleri olabilir.

import { makeObservable, observable } from 'mobx';

class UserStore {
  id = null;
  firstName = '';
  lastName = '';

  constructor() {
    makeObservable(this, {
      id: observable,
      firstName: observable,
      lastName: observable
    });
  }
}

const userStore = new UserStore();

2. Computed Values (Hesaplanmış Değerler)

Mevcut gözlemlenebilir state'ten türetilen değerlerdir. Bir `computed` değer, bağımlı olduğu observable state değiştiğinde otomatik olarak yeniden hesaplanır. Bu, gereksiz hesaplamaları önler ve performansı artırır.

import { makeObservable, observable, computed } from 'mobx';

class UserStore {
  id = null;
  firstName = '';
  lastName = '';

  constructor() {
    makeObservable(this, {
      id: observable,
      firstName: observable,
      lastName: observable,
      fullName: computed // computed ile yeni bir değer tanımladık
    });
  }

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const userStore = new UserStore();
userStore.firstName = 'İsmail';
userStore.lastName = 'YAĞCI';
console.log(userStore.fullName); // İsmail YAĞCI

3. Actions (Eylemler)

State'i değiştiren fonksiyonlardır. MobX, state değişikliklerinin sadece action'lar aracılığıyla yapılmasını teşvik eder (isteğe bağlı olarak zorunlu kılınabilir). Bu, state'in tutarlılığını sağlamaya yardımcı olur.

import { makeObservable, observable, computed, action } from 'mobx';

class UserStore {
  // ... (yukarıdaki gibi observable ve computed tanımları)

  constructor() {
    makeObservable(this, {
      id: observable,
      firstName: observable,
      lastName: observable,
      fullName: computed,
      setFirstName: action, // action olarak tanımlandı
      setLastName: action
    });
  }

  setFirstName(name) {
    this.firstName = name;
  }

  setLastName(name) {
    this.lastName = name;
  }
}

const userStore = new UserStore();
userStore.setFirstName('İsmail');
userStore.setLastName('YAĞCI');

4. Reactions (Tepkiler)

State'deki değişikliklere otomatik olarak tepki veren yan etkilerdir (side effects). `autorun`, `reaction` ve `when` gibi fonksiyonlarla tanımlanır. Örneğin, bir state değiştiğinde otomatik olarak loglama yapmak veya bir API isteği göndermek için kullanılabilirler.

import { makeObservable, observable, reaction, action } from 'mobx';

class TodoStore {
  todos = [];

  constructor() {
    makeObservable(this, {
      todos: observable,
      addTodo: action
    });

    // 'todos' dizisi değiştiğinde çalışacak bir reaksiyon
    reaction(
      () => this.todos.length,
      (length) => {
        console.log(`Todo sayısı güncellendi: ${length}`);
      }
    );
  }

  addTodo(todo) {
    this.todos.push(todo);
  }
}

const todoStore = new TodoStore();
todoStore.addTodo('MobX öğren'); // Çıktı: Todo sayısı güncellendi: 1

A collage of an Asian man expressing various positive and negative emotions, symbolizing the concept of diverse reactions in reactive programming with MobX.

React Native ile MobX Entegrasyonu: Adım Adım Rehber

MobX'i React Native uygulamanıza entegre etmek oldukça basittir.

Adım 1: Kurulum

npm install mobx mobx-react-lite # veya yarn add mobx mobx-react-lite

mobx-react-lite, functional component'lar için daha hafif ve hook tabanlı bir entegrasyon sunar.

Adım 2: Bir Store Oluşturma

Uygulamanızın domain mantığını ve state'ini içeren bir veya birden fazla store sınıfı oluşturun. Örneğin, bir `CounterStore`:

// store/CounterStore.js
import { makeAutoObservable, action } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this); // Tüm alanları observable ve fonksiyonları action yapar
  }

  increment = () => {
    this.count++;
  };

  decrement = () => {
    this.count--;
  };
}

export const counterStore = new CounterStore();

Adım 3: React Native Bileşeninde Kullanım

Bileşenlerinizde `mobx-react-lite`'dan `observer` HOC'unu (veya hook'unu) kullanarak store'daki değişikliklere reaktif hale getirin.

// App.js
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { observer } from 'mobx-react-lite';
import { counterStore } from './store/CounterStore';

const CounterApp = observer(() => {
  return (
    <View style={styles.container}>
      <Text style={styles.counterText}>Count: {counterStore.count}</Text>
      <View style={styles.buttonContainer}>
        <Button title="Artır" onPress={counterStore.increment} />
        <Button title="Azalt" onPress={counterStore.decrement} />
      </View>
    </View>
  );
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  counterText: {
    fontSize: 48,
    marginBottom: 20,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    width: '60%',
  },
});

export default CounterApp;

Bu örnekte, `counterStore.count` değeri değiştiğinde, sadece `CounterApp` bileşeni (veya içinde `count` değerini kullanan alt bileşenler) yeniden render edilecektir. Bu, MobX'in reaktivite prensibinin temelidir.

Gerçek Dünya Senaryoları ve İleri Seviye MobX Kullanımı

Asenkron İşlemler (API İstekleri)

MobX ile asenkron işlemler, `async/await` kullanarak action'ların içinde kolayca yönetilebilir. Örneğin, bir API'den kullanıcı verisi çekmek:

// store/UserStore.js
import { makeAutoObservable, runInAction } from 'mobx';

class UserStore {
  user = null;
  isLoading = false;
  error = null;

  constructor() {
    makeAutoObservable(this);
  }

  fetchUser = async (userId) => {
    this.isLoading = true;
    this.error = null;
    try {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const data = await response.json();
      runInAction(() => {
        this.user = data;
        this.isLoading = false;
      });
    } catch (err) {
      runInAction(() => {
        this.error = 'Kullanıcı bilgileri alınamadı.';
        this.isLoading = false;
      });
    }
  };
}

export const userStore = new UserStore();

runInAction kullanımı, asenkron bir operasyonun içinde birden fazla observable state'i atomik olarak güncellemek ve MobX'in bunları tek bir transaction gibi algılamasını sağlamak için önemlidir.

Karmaşık Veri Yapıları ve Referanslar

MobX, iç içe geçmiş nesneleri ve dizileri otomatik olarak gözlemlenebilir hale getirebilir (derinlemesine gözlem). Bu, veritabanı yanıtlarından gelen karmaşık veri yapılarını kolayca yönetmenizi sağlar.

Performans İpuçları ve En İyi Uygulamalar

Minimal Observable Alanlar: Yalnızca değişmesi beklenen ve bileşenleri etkileyecek alanları `observable` olarak işaretleyin. Her şeyi observable yapmak gereksiz yere kaynak tüketebilir.
Computed Values Kullanın: Mevcut state'ten türetilen değerler için computed kullanın. Bu, sadece bağımlılıkları değiştiğinde yeniden hesaplanarak performansı artırır.
`observer` Kullanımını Optimize Edin: `observer` HOC'unu veya hook'unu, sadece state'e bağımlı olan ve yeniden render edilmesi gereken en küçük bileşenlerin etrafına sarın. Bu, gereksiz render'ları daha da azaltır.
`flow` veya `async/await` ile Asenkron İşlemler: Asenkron işlemleri yönetmek için MobX'in `flow` yardımcı fonksiyonunu veya doğrudan `async/await` ile `runInAction` kullanarak state güncellemelerini atomik tutun.
Daha Büyük Uygulamalar İçin Root Store: Uygulamanız büyüdükçe, farklı domain'ler için ayrı store'lar oluşturup bunları tek bir `RootStore` altında birleştirmek, kodunuzu daha modüler ve yönetilebilir hale getirecektir. Context API'yi kullanarak bu `RootStore`'u uygulamaya enjekte edebilirsiniz.

Sonuç

MobX, React Native uygulamalarında state yönetimini önemli ölçüde basitleştiren, geliştirme hızını artıran ve performans optimizasyonu sağlayan güçlü bir reaktif programlama kütüphanesidir. Geleneksel yaklaşımların getirdiği boilerplate kod yığınından kurtulmak ve daha deklaratif bir state yönetimi deneyimi yaşamak isteyen geliştiriciler için mükemmel bir alternatiftir.

Uygulamanızın karmaşıklığı arttıkça, MobX'in sunduğu otomatik reaktivite ve basit API sayesinde veri akışını yönetmek çok daha kolay hale gelir. Bu yazıda ele aldığımız temel prensipler ve örnekler, MobX'i React Native projelerinize entegre etmek için size sağlam bir başlangıç noktası sunacaktır. Performans ve esnekliği bir arada arıyorsanız, MobX'e mutlaka bir şans vermelisiniz.

Eğer aklınıza takılan sorular olursa veya bu konularda daha derinlemesine bilgi almak isterseniz, bana ismailyagci371@gmail.com adresinden veya sosyal medya kanallarından (İsmail YAĞCI) ulaşabilirsiniz. Sağlıklı ve başarılı kodlamalar dilerim!

Orijinal yazı: https://ismailyagci.com/articles/react-native-uygulamalarinda-ileri-seviye-veri-akisi-mobx-ile-reaktif-programlama-gucu

Bu Blogda Ara

İsmail YAĞCI | Full Stack Developer