Photo by Donna Ruiz on Unsplash

Zustand

Zustand DevTool Integration

Bu yazıda Client State Management Redux alternatifi olarak kullanılan Zustand için Development Tool aracının nasıl kullanıldığından bahsedeceğim.

Zustand konusuna neden bu kadar üzerinde durduğumu tekrarlayayım.

React State yapısını oluşturabilmek için GlobalState yönetim kütüphaneleri olarak sadece Redux kullanmak yerine ReactQuery gibi ServerSync kütüphaneleri kullanmaya başlayınca, ClientState için daha lightweight kütüphaneler kullanabiliriz, Bunlardan Redux en yakın olanda Zustand tercih edebilirsiniz. (Blog yazısına link)

React Örnek Proje Mimarisi — 6 (Sunucu İletişiminin Mimariye Etkisi)

Zustand konusunda bundan öncede bir kaç blog yazısı yazmıştım.

• Zustand
• Zustand, Redux Yerine Kullanılabilir mi?
• Zustand, Middleware?

Zustand Middleware kısmında Zustand ReduxDev Tool’dan faydalanarak nasıl gösterebileceğimizi anlatmıştım. Hem bir kısımda eksikler olması nedeniyle hemde konunun önemi nedeniyle bu konuda tekrardan bir blog yazmak istedim.

Tabi bazılarının kafasında ReduxDev Tool ne alaka diye bir soru gelebilir. Zustand, Redux daha basit bir hali olduğu için aynı interface’lerde çalıştığı için ReduxDevTool aracından aynı şekilde faydalanabiliyoruz.

Bu Development aracından ne işe yaradığını aşağıdaki blogda yazmıştım.

• Redux DevTools Kullanımı

Şimdi gelelim basit bir örnek üzerinden DevTools bağlantısını anlatmaya.

Basit Bir Örnek

Bu örnekte bir Counter store oluşturalım. İçerisinde count değerini tutsun ve kendisine gönderilen komutlar üzerinden count değerini arttırsın ve azaltsın.

import {create} from 'zustand';

export const useCounter = create((set) => ({
  count: 0,
  increase: () => set((state) => ({count: state.count + 1})),
  decrease: () => set((state) => ({count: state.count - 1})),
  increaseBy: (amount) => set((state) => ({count: state.count + amount})),
}));

Demo

https://onurdayibasi.dev/state-zustand-counter

Sonrasında ReduxDevTools indirip bunun üzerinden arkaplandaki işleyişi analiz etmeye çalışalım.

Bu kısımda Redux ile ilgili kısımları görebiliyoruz fakat Zustand Store Redux Toolkit içerisine henüz gelmedi.

Bunun için yapılması gereken zustand/middleware den devtools indirilerek store bunla kapsanması.

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

export const useCounter = create(
  devtools(
    (set) => ({
      count: 0,
      increase: () => set((state) => ({count: state.count + 1}), 
                                      false, {type: 'increase'}),
      decrease: () => set((state) => ({count: state.count - 1}), 
                                      false, {type: 'decrease'}),
      increaseBy: (amount) => set((state) => ({count: state.count + amount}), 
                                      false, {type: 'increaseBy', amount}),
    }),
    {name: 'CounterZustandStore', serialize: {options: false}},
  ),
);

Store artık bir isim verebilir, Benim örneğimde ben CounterZustandStore ismini verdim.

Ve her bir fonksiyon içerisinde bu işlem ReduxDevTool gözükebilmesi için Type ve ekstra işlem için yapılan parametreleri obj olarak geçtim.

Bu durumda ilgili Store ismini görebiliyor ve store üzerinde yapılan işlemleri adım adım takip edebiliyoruz.

Örneğin istediğimiz bir aktiviteye gidip bunun içerisinde hangi parametreler gönderilmiş net bir şekilde bakabiliyoruz.

Store istediğimiz bir zaman tarihine geri alıp, buradan itibaren ileri sarıp durumların tekrar etmesini sağlıyoruz.

Referanslar

• https://github.com/pmndrs/zustand

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara [React State] erişmek için bu linke tıklayabilirsiniz.

Bu yazının devamı veya yazı grubundaki diğer yazılara [React Performance] erişmek için bu linke tıklayabilirsiniz.