Redux’tan Zustand’a: React Native Uygulamanızı Sorunsuz Taşıma Rehberi

React Native uygulamalarında durum yönetimi, uygulamanın karmaşıklığı arttıkça kritik bir hal alır. Yıllardır sektör standardı olan Redux, güçlü yapısına rağmen getirdiği öğrenme eğrisi ve boilerplate kod yüküyle bazı geliştiriciler için zorlayıcı olabilmektedir. Bu makale, mevcut bir React Native uygulamasını Redux’tan daha modern, basit ve performanslı bir alternatif olan Zustand’a nasıl taşıyacağınızı adım adım açıklayacaktır.

Neden Redux’tan Zustand’a Geçmeliyiz?

Durum yönetimi çözümü seçimi, bir uygulamanın geliştirme hızını, bakım kolaylığını ve performansını doğrudan etkiler. Redux’ın kanıtlanmış bir geçmişi olsa da, modern React ekosisteminde daha hafif ve kullanımı kolay alternatifler ortaya çıkmıştır. Zustand, bu alternatiflerden biridir ve özellikle React Native projeleri için cazip avantajlar sunar.

Redux’ın Karmaşıklığı ve Öğrenme Eğrisi

Redux, store, reducer, action, middleware, selector gibi birçok kavramı bir araya getirir. Bu yapı, büyük ve karmaşık uygulamalarda tutarlılık sağlasa da, başlangıçta öğrenmesi zaman alıcı olabilir. Özellikle redux-thunk veya redux-saga gibi asenkron işlem kütüphaneleriyle birlikte kullanıldığında, kod tabanı daha da genişler ve anlaşılması zorlaşır. Bir durum güncellemesi için birden fazla dosya ve katman arasında gezinmek, geliştirici deneyimini olumsuz etkileyebilir.

Zustand’ın Basitliği ve Minimalizmi

Zustand, “küçük, hızlı ve ölçeklenebilir” mottosuyla öne çıkar. Kancalar (hooks) tabanlı API’si sayesinde, bir Redux uygulamasında gördüğünüz boilerplate kodun çoğunu ortadan kaldırır. Tek bir JavaScript dosyası içinde bir store tanımlayabilir, durumları güncelleyebilir ve bileşenlerinizde kolayca kullanabilirsiniz. Bu minimalist yaklaşım, hem yeni başlayanlar hem de deneyimli geliştiriciler için öğrenme ve kullanma sürecini oldukça basitleştirir.

Performans ve Geliştirici Deneyimi Farkları

Zustand, Redux’a kıyasla daha az yeniden render tetikleme eğilimindedir çünkü sadece gerçekten değişen durum parçacıklarını izler. Bu, özellikle React Native gibi performansın kritik olduğu ortamlarda önemli bir avantaj sağlar. Geliştirici deneyimi açısından, daha az kod yazmak, daha az yapılandırma yapmak ve daha hızlı prototipleme imkanı sunması, Zustand’ı cazip kılar. Hızlı ve doğrudan API’si sayesinde, durum yönetimiyle ilgili sorunları daha çabuk çözebilir ve uygulamanızın temel özelliklerine odaklanabilirsiniz.

Zustand’a Giriş: Temeller ve Avantajları

Zustand, React için basit, hızlı ve ölçeklenebilir bir durum yönetim kütüphanesidir. Minimalist yapısı ve kanca tabanlı API’si ile geliştiricilere modern bir deneyim sunar.

Zustand Nedir ve Nasıl Çalışır?

Zustand, bir React hook’u gibi çalışan ve durumu yönetmek için tek bir store nesnesi oluşturan hafif bir kütüphanedir. Herhangi bir React Context API’sine veya sağlayıcı (provider) sarmalayıcısına ihtiyaç duymaz. Bu, bileşen hiyerarşinizden bağımsız olarak herhangi bir yerden store’unuza erişebileceğiniz anlamına gelir. Zustand, durumu doğrudan bir fonksiyon içinde tanımlamanıza olanak tanır ve bu fonksiyon, durumu ve durumu güncelleyen eylemleri (actions) içerir.

import { create } from 'zustand';

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

export default useBearStore;

Yukarıdaki örnekte, useBearStore adında bir kanca oluşturduk. Bu kanca, bears adında bir duruma ve bu durumu güncelleyen iki eyleme (increasePopulation, removeAllBears) sahiptir.

Kancalar (Hooks) ve API Yapısı

Zustand'ın temel gücü, React kancalarıyla olan entegrasyonundan gelir. Bir bileşen içinde durumu kullanmak için, oluşturduğunuz kancayı doğrudan çağırır ve istediğiniz durumu veya eylemi seçersiniz:

import React from 'react';
import useBearStore from './useBearStore';

function BearCounter() {
  const bears = useBearStore((state) => state.bears);
  return 
{bears} adet ayı var.
;
}

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation);
  return Bir ayı daha ekle;
}

Bu yaklaşım, bileşenlerin yalnızca ihtiyaç duydukları durum parçacıklarını dinlemesini sağlar, bu da gereksiz yeniden renderları azaltır ve performansı artırır.

Middleware Desteği ve Genişletilebilirlik

Zustand, Redux'taki middleware kavramına benzer şekilde, store'unuzun davranışını genişletmenize olanak tanıyan bir dizi yardımcı fonksiyon sunar. Örneğin, persist middleware'i ile durumu yerel depolamaya kaydedebilir, devtools ile tarayıcı geliştirici araçlarında durumu izleyebilirsiniz. Bu middleware'ler, store oluşturma fonksiyonuna kolayca entegre edilebilir:

import { create } from 'zustand';
import { persist, devtools } from 'zustand/middleware';

const useAuthStore = create(
  devtools(
    persist(
      (set) => ({
        token: null,
        user: null,
        login: (token, user) => set({ token, user }),
        logout: () => set({ token: null, user: null }),
      }),
      {
        name: 'auth-storage', // depolama anahtarı
      }
    )
  )
);

Bu genişletilebilirlik, Zustand'ın basitliğini korurken karmaşık ihtiyaçlara cevap verebilmesini sağlar.

Geçiş Sürecine Hazırlık ve Planlama

Her büyük refactoring işleminde olduğu gibi, Redux'tan Zustand'a geçiş de dikkatli bir planlama gerektirir. Doğru bir strateji, olası sorunları minimize eder ve geçişi daha sorunsuz hale getirir.

Mevcut Redux Yapısını Anlama

Geçişe başlamadan önce, mevcut Redux yapınızı derinlemesine anlamak kritik öneme sahiptir. Hangi reducer'lar hangi durumları yönetiyor? Hangi action'lar hangi reducer'ları tetikliyor? redux-thunk veya redux-saga ile asenkron işlemler nasıl yönetiliyor? Bu soruların cevapları, Zustand'da eşdeğer yapıları oluşturmanıza yardımcı olacaktır. Özellikle combineReducers ile birleştirilmiş farklı domain'lere ait reducer'ları Zustand'da ayrı store'lara dönüştürmek iyi bir yaklaşım olabilir.

Adım Adım Geçiş Stratejileri

Büyük bir uygulamayı tek seferde geçirmeye çalışmak riskli ve hataya açık olabilir. Bunun yerine, kademeli bir geçiş stratejisi izlemek daha güvenlidir.

1. Küçük Modüllerden Başlama: Uygulamanızdaki daha az kritik veya bağımsız modüllerden başlayın.
2. Yan Yana Kullanım: Geçiş süresince hem Redux hem de Zustand'ı aynı uygulamada yan yana kullanabilirsiniz. Bu, yeni Zustand store'larını test etmenize ve doğruluğunu sağlamanıza olanak tanır.
3. Yeni Özellikleri Zustand ile Geliştirme: Uygulamanıza eklenecek yeni özellikleri doğrudan Zustand ile geliştirerek, Redux kod tabanını yavaş yavaş küçültebilirsiniz.

Bu yaklaşımlar, geçişin kontrol altında tutulmasına ve olası regresyonların erken tespit edilmesine yardımcı olur.

Küçük Modüllerden Başlama Yaklaşımı

Uygulamanızdaki en küçük ve en az bağımlılığı olan Redux modüllerini belirleyin. Örneğin, bir kullanıcı arayüzü temasını yöneten basit bir durum, bir bildirim kuyruğu veya bir dil seçeneği gibi. Bu tür modüllerin Zustand'a taşınması, sürecin nasıl işlediğini anlamanıza ve güven kazanmanıza yardımcı olur. Başarılı bir küçük geçişin ardından, daha karmaşık modüllere geçiş yapabilirsiniz.

Redux Store'larını Zustand Store'larına Dönüştürme

Redux'tan Zustand'a geçişin kalbi, mevcut Redux store'larını ve reducer mantığını Zustand'ın daha basit yapısına adapte etmektir.

Temel Zustand Store Oluşturma

Redux'ta createStore veya configureStore (Redux Toolkit ile) kullanarak bir global store oluştururken, Zustand'da her bir durum dilimi (slice) için ayrı bir kanca tabanlı store oluşturursunuz. Örneğin, Redux'taki bir "auth" reducer'ı için Zustand'da şöyle bir store oluşturabilirsiniz:

// Redux (Örnek)
// const authReducer = (state = initialState, action) => { ... };

// Zustand
import { create } from 'zustand';

const useAuthStore = create((set) => ({
  isAuthenticated: false,
  user: null,
  login: (userData) => set({ isAuthenticated: true, user: userData }),
  logout: () => set({ isAuthenticated: false, user: null }),
}));

export default useAuthStore;

Bu yapı, Redux'taki combineReducers mantığını daha modüler ve ayrık Zustand store'larına bölmenize olanak tanır.

Redux Reducer Mantığını Zustand Actions'a Taşıma

Redux'ta, durum güncellemeleri action'lar gönderilerek ve reducer'lar tarafından işlenerek yapılırdı. Zustand'da ise, durum güncellemeleri doğrudan store'unuzda tanımladığınız eylemler (fonksiyonlar) aracılığıyla gerçekleştirilir. Bu eylemler, set fonksiyonunu kullanarak durumu günceller.

Redux Reducer Örneği:

const initialState = { count: 0 };

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

Zustand Store Karşılığı:

import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

Gördüğünüz gibi, switch ifadeleri ve action type'ları ortadan kalkar, kod daha okunabilir ve doğrudan hale gelir.

Asenkron İşlemler (Thunks/Sagas) ve Zustand'daki Karşılıkları

Redux'ta asenkron işlemleri yönetmek için genellikle redux-thunk veya redux-saga gibi middleware'ler kullanılırdı. Zustand'da ise asenkron işlemler, doğrudan store'unuzdaki eylem fonksiyonları içinde async/await veya Promise'ler kullanılarak yönetilebilir. set fonksiyonu, asenkron bir işlemin tamamlanmasının ardından durumu güncellemek için çağrılabilir.

Redux Thunk Örneği:

const fetchUsers = () => async (dispatch) => {
  dispatch({ type: 'FETCH_USERS_REQUEST' });
  try {
    const response = await fetch('/api/users');
    const users = await response.json();
    dispatch({ type: 'FETCH_USERS_SUCCESS', payload: users });
  } catch (error) {
    dispatch({ type: 'FETCH_USERS_FAILURE', payload: error.message });
  }
};

Zustand Karşılığı:

import { create } from 'zustand';

const useUserStore = create((set) => ({
  users: [],
  loading: false,
  error: null,
  fetchUsers: async () => {
    set({ loading: true, error: null });
    try {
      const response = await fetch('/api/users');
      const users = await response.json();
      set({ users, loading: false });
    } catch (error) {
      set({ error: error.message, loading: false });
    }
  },
}));

Bu yaklaşım, asenkron akışları basitleştirir ve daha az bağımlılıkla yönetmenizi sağlar.

React Native Bileşenlerini Güncelleme

Redux'tan Zustand'a geçişin bir diğer önemli adımı, React Native bileşenlerinizdeki durum kullanımını güncellemek ve Zustand'ın kanca tabanlı API'sine uyarlamaktır.

useSelector Yerine useStore Kullanımı

Redux'ta, bileşenler store'dan durum parçacıklarını seçmek için react-redux kütüphanesinden useSelector kancasını kullanırdı. Zustand'da ise, oluşturduğunuz özel store kancasını (örneğin useAuthStore) doğrudan çağırır ve istediğiniz durumu seçersiniz.

Redux Örneği:

import { useSelector } from 'react-redux';

function UserProfile() {
  const user = useSelector((state) => state.auth.user);
  return Hoş Geldin, {user?.name};
}

Zustand Karşılığı:

import useAuthStore from './useAuthStore'; // Zustand store'unuz

function UserProfile() {
  const user = useAuthStore((state) => state.user);
  return Hoş Geldin, {user?.name};
}

Zustand'ın bu yaklaşımı, bileşenin yalnızca seçilen durum değiştiğinde yeniden render olmasını sağlayarak performansı artırır.

mapDispatchToProps Yerine Doğrudan Aksiyon Çağrıları

Redux'ta, bileşenlerden eylem göndermek için genellikle useDispatch kancası veya mapDispatchToProps kullanılırdı. Zustand'da ise, store'unuzda tanımladığınız eylem fonksiyonlarını doğrudan seçip çağırabilirsiniz.

Redux Örneği:

import { useDispatch } from 'react-redux';
import { loginUser } from '../actions/authActions';

function LoginForm() {
  const dispatch = useDispatch();
  const handleLogin = () => {
    dispatch(loginUser({ username: 'test', password: '123' }));
  };
  return ;
}

Zustand Karşılığı:

import useAuthStore from './useAuthStore'; // Zustand store'unuz

function LoginForm() {
  const login = useAuthStore((state) => state.login);
  const handleLogin = () => {
    login({ username: 'test', password: '123' });
  };
  return ;
}

Bu, kodun daha kısa, daha anlaşılır ve daha az bağımlılığa sahip olmasını sağlar.

Context API ile Entegrasyon (Gerekiyorsa)

Zustand'ın doğası gereği, React Context API'sine doğrudan ihtiyacı yoktur. Ancak, bazı özel durumlarda (örneğin, bir store'u birden fazla farklı bağlamda kullanmak veya test amaçlı mocklamak) Zustand store'larını Context API ile sarmalamak isteyebilirsiniz. Bu genellikle nadiren gerekli olsa da, Zustand'ın esnekliği buna olanak tanır. Çoğu durumda, Zustand kancalarını doğrudan kullanmak yeterli ve tercih edilen yöntemdir.

Test ve Optimizasyon

Geçiş sürecinin önemli bir parçası da yeni Zustand store'larınızın doğru çalıştığından emin olmak ve performans optimizasyonlarını uygulamaktır.

Zustand Store'larını Test Etme

Zustand store'ları, Redux reducer'larına göre test etmesi daha kolaydır. Store'lar bağımsız JavaScript fonksiyonları olduğu için, bunları doğrudan import edip test edebilirsiniz. React bileşenlerine ihtiyaç duymadan, store'un durumunu ve eylemlerini kontrol edebilirsiniz.

import { act } from 'react-test-renderer'; // react-test-renderer veya @testing-library/react'tan
import useCounterStore from './useCounterStore';

describe('useCounterStore', () => {
  it('sayacı artırmalıdır', () => {
    // Durumu sıfırla (eğer testler arasında durum kalıyorsa)
    act(() => useCounterStore.setState({ count: 0 }));

    // Aksiyonu çağır
    act(() => useCounterStore.getState().increment());

    // Durumu kontrol et
    expect(useCounterStore.getState().count).toBe(1);
  });

  it('sayacı azaltmalıdır', () => {
    act(() => useCounterStore.setState({ count: 1 }));
    act(() => useCounterStore.getState().decrement());
    expect(useCounterStore.getState().count).toBe(0);
  });
});

act yardımcı fonksiyonu, React'ın test ortamında durum güncellemelerinin doğru bir şekilde işlenmesini sağlar.

Performans İyileştirmeleri ve Memoization

Zustand, varsayılan olarak iyi performans gösterir çünkü yalnızca seçilen durum değiştiğinde bileşenleri yeniden render eder. Ancak, daha fazla optimizasyon için şunları göz önünde bulundurabilirsiniz:

• Doğru Seçiciler (Selectors): Bileşenlerinizde yalnızca ihtiyaç duyduğunuz durum parçacıklarını seçin. Örneğin, const { user, token } = useAuthStore() yerine const user = useAuthStore(state => state.user) kullanmak, token değiştiğinde user'ın yeniden render olmasını engeller.
• Derin Eşitlik Karşılaştırması: Nesneler veya diziler gibi referans tiplerini seçerken, varsayılan referans eşitliği yerine derin eşitlik karşılaştırması kullanmak için shallow veya özel bir karşılaştırma fonksiyonu kullanabilirsiniz: const user = useAuthStore(state => state.user, shallow).
• Memoization: Karmaşık hesaplamalar yapan seçicileriniz varsa, bunları useCallback veya useMemo ile memoize edebilirsiniz.

Hata Ayıklama (Debugging) Araçları

Zustand, Redux DevTools ile entegrasyonu destekler. devtools middleware'ini kullanarak store'unuzdaki durum değişikliklerini tarayıcı geliştirici araçlarından izleyebilirsiniz:

import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

const useMyStore = create(devtools((set) => ({ /* ... */ })));

Bu, durum akışını anlamanıza ve hataları ayıklamanıza büyük ölçüde yardımcı olur.

Geçiş Sonrası Dikkat Edilmesi Gerekenler ve En İyi Pratikler

Geçiş tamamlandıktan sonra bile, uygulamanızın sağlığını ve sürdürülebilirliğini sağlamak için bazı en iyi pratikleri uygulamak önemlidir.

Kod Temizliği ve Refactoring

Redux'tan kalan tüm eski kodları (reducer'lar, action'lar, store yapılandırmaları, react-redux import'ları) temizleyin. Bu, kod tabanınızı daha düzenli hale getirecek ve kafa karışıklığını önleyecektir. Gereksiz bağımlılıkları kaldırın ve dosya yapınızı Zustand'ın modüler yapısına uygun hale getirin. Her bir Zustand store'unu kendi dosyasına koymak iyi bir yaklaşımdır.

Topluluk Desteği ve Kaynaklar

Zustand, aktif ve büyüyen bir topluluğa sahiptir. Takıldığınız noktalarda GitHub tartışmalarını, Stack Overflow'u veya Zustand'ın resmi belgelerini kontrol etmekten çekinmeyin. Yeni özellikler ve en iyi pratikler hakkında bilgi sahibi olmak için topluluğu takip etmek faydalıdır.

Gelecekteki Bakım Kolaylığı

Zustand'ın basit yapısı, uygulamanızın gelecekteki bakımını önemli ölçüde kolaylaştırır. Yeni geliştiricilerin projeye adaptasyonu daha hızlı olur ve durum yönetimiyle ilgili sorunlar daha az zaman alır. Store'larınızı mantıksal olarak ayırarak ve her store'un tek bir sorumluluğu olmasını sağlayarak (single responsibility principle), kodunuzu daha sürdürülebilir hale getirebilirsiniz.

Redux ve Zustand Karşılaştırma Tablosu:

Sonuç

Redux'tan Zustand'a geçiş, React Native uygulamanız için geliştirici deneyimini önemli ölçüde iyileştirebilecek, kod karmaşıklığını azaltabilecek ve potansiyel olarak performansı artırabilecek değerli bir adımdır. Bu makalede özetlenen adımları ve en iyi pratikleri takip ederek, bu geçişi sorunsuz ve verimli bir şekilde gerçekleştirebilirsiniz. Zustand'ın basitliği ve gücü, modern React Native projelerinde durum yönetimini daha keyifli ve yönetilebilir hale getirecektir.

SSS (Sık Sorulan Sorular)

Zustand Redux'tan daha mı iyi?

Bu, projenin ihtiyaçlarına ve ekibin tercihlerine bağlıdır. Zustand genellikle daha az boilerplate kod, daha kolay öğrenme eğrisi ve daha iyi geliştirici deneyimi sunar. Küçük ve orta ölçekli projeler için genellikle daha iyi bir seçimdir. Redux ise büyük, karmaşık ve olgunlaşmış projelerde kanıtlanmış bir geçmişe sahiptir.

Geçiş ne kadar sürer?

Geçiş süresi, uygulamanızın büyüklüğüne, Redux yapısının karmaşıklığına ve ekibinizin deneyimine bağlıdır. Küçük bir uygulama için birkaç gün, büyük bir uygulama için ise birkaç hafta veya ay sürebilir. Kademeli bir geçiş stratejisi izlemek, süreci daha yönetilebilir kılar.

Tüm uygulamayı aynı anda mı geçirmeliyim?

Hayır, genellikle önerilen yaklaşım kademeli geçiştir. Uygulamanızdaki bağımsız ve daha az kritik modüllerden başlayarak, Redux ve Zustand'ı bir süre yan yana kullanabilirsiniz. Bu, riskleri azaltır ve ekibin yeni yapıya alışmasını sağlar.

Zustand ile persist işlemi nasıl yapılır?

Zustand, zustand/middleware paketinden gelen persist middleware'i ile durumu kolayca yerel depolamaya (localStorage, AsyncStorage vb.) kaydedebilir. Örnek için "Middleware Desteği ve Genişletilebilirlik" bölümüne bakabilirsiniz.

Redux Toolkit kullanıyordum, Zustand'a geçmek mantıklı mı?

Redux Toolkit, Redux'ın boilerplate kodunu önemli ölçüde azaltır ve geliştirici deneyimini iyileştirir. Eğer Redux Toolkit ile zaten memnunsanız ve uygulamanızın karmaşıklığı Redux'ı gerektiriyorsa, geçiş yapmak zorunda değilsiniz. Ancak, daha da basit ve bağımlılıksız bir çözüm arıyorsanız, Zustand hala cazip bir alternatif olabilir.