Gelişmiş Zustand: Middleware ve Kalıcılık

Reading Time: 2 minutes

Okuma Süresi: 3 dakika

Zustand, middleware aracılığıyla güçlü özellikler sunan minimalist bir state yönetimi çözümüdür. Zustand’daki middleware, logging, Redux DevTools ile entegrasyon veya state’in local storage’a kaydedilmesi gibi çeşitli amaçlar için kullanılabilir. Bu makale, React uygulamalarınızdaki state yönetimini geliştirmek için bu middleware yeteneklerinden nasıl yararlanabileceğinizi ele alıyor.

Zustand’da Middleware

Zustand’daki middleware, store’larınızın işlevselliğini ek davranışlarla genişletmenize olanak tanır. Bu, özellikle state değişikliklerini loglamak, hata ayıklamak veya state’i oturumlar arasında kalıcı hale getirmek için yararlı olabilir. Zustand, middleware’i state yönetimi kurulumunuza dahil etmenin basit ve etkili bir yolunu sunar.

Local Storage ile State Kalıcılığı

Middleware’in yaygın bir kullanım alanı, state’i local storage’a kaydetmektir. Bu, uygulama state’inizin kullanıcı sayfayı yeniledikten veya siteye daha sonra tekrar geldikten sonra bile korunmasını sağlar. Zustand’ın persist middleware’i bu süreci oldukça basitleştirir.

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

// Kalıcılık middleware'i ile bir store oluşturun
const useStore = create(
  persist(
    (set) => ({
      user: null,
      login: (userData) => set({ user: userData }),
      logout: () => set({ user: null }),
    }),
    {
      name: 'user-storage', // localStorage için anahtar
    }
  )
);

// Kullanım
const { user, login, logout } = useStore();

Bu örnekte, persist middleware’i kullanıcı state’ini local storage’a kaydetmek için kullanılır. name özelliği, state’in hangi anahtar altında saklanacağını belirtir. Bu kurulum, kullanıcının oturum açma durumunun oturumlar arasında korunmasını sağlayarak kesintisiz bir kullanıcı deneyimi sunar.

Logging Middleware

Logging, middleware’in bir diğer yararlı uygulamasıdır. State değişikliklerini loglayarak, state’in zaman içinde nasıl evrildiğini izleyebilir, bu da hata ayıklama ve geliştirme için son derece değerlidir.

import { create } from 'zustand';

// Özel logging middleware'i
const log = (config) => (set, get, api) =>
  config(
    (...args) => {
      console.log('Uygulanıyor', args);
      set(...args);
      console.log('Yeni state', get());
    },
    get,
    api
  );

const useStore = create(
  log((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }))
);

// Kullanım
const { count, increment } = useStore();

Bu özel logging middleware’i, her değişiklikten önce ve sonra state’i loglayarak state güncellemelerinin nasıl uygulandığına dair görünürlük sağlar. Bu, state değişikliklerinin akışını anlamak için geliştirme sırasında özellikle yararlı olabilir.

Redux DevTools Entegrasyonu

Redux DevTools, uygulama state’ini hata ayıklamak için güçlü bir araçtır. Zustand, devtools middleware’i kullanılarak Redux DevTools ile entegre edilebilir, böylece state değişikliklerini inceleyebilir, zaman yolculuğu hata ayıklama ve daha fazlasını yapabilirsiniz.

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

const useStore = create(
  devtools(
    (set) => ({
      darkMode: false,
      toggleDarkMode: () => set((state) => ({ darkMode: !state.darkMode })),
    }),
    { name: 'DarkModeStore' } // DevTools için store adı
  )
);

// Kullanım
const { darkMode, toggleDarkMode } = useStore();

Bu örnekte, devtools middleware’i Zustand store’unu Redux DevTools’a bağlamak için kullanılır. name özelliği, store’un DevTools’ta görüneceği adı belirtir. Bu entegrasyon, güçlü hata ayıklama yetenekleri sağlayarak state değişikliklerini takip etmeyi ve state yönetimi akışını anlamayı kolaylaştırır.

Sonuç

Zustand’daki middleware, karmaşıklık eklemeden state yönetiminizin işlevselliğini genişletmenin esnek ve güçlü bir yolunu sunar. State’i kalıcı hale getirmeniz, değişiklikleri loglamanız veya Redux DevTools gibi hata ayıklama araçlarıyla entegre etmeniz gerekip gerekmediğine bakılmaksızın, Zustand’ın middleware desteği, uygulamanızın state yönetimi yeteneklerini geliştirmeyi kolaylaştırır.

Bu middleware seçeneklerinden yararlanarak, daha sağlam ve sürdürülebilir React uygulamaları oluşturabilir, state yönetiminizin hem verimli hem de etkili olmasını sağlayabilirsiniz. Zustand’ın middleware yaklaşımı, geliştiricilerin özellikler ve işlevsellik oluşturmaya odaklanmalarını sağlar, state yönetimi çözümlerinin hem ölçeklenebilir hem de ihtiyaçlarına uyarlanabilir olduğundan emin olabilirler.