Zustand'ı Anlamak

Durum yönetimi (state management) genellikle çok karmaşık hissettirir.

React useState kullanımını biliyorsunuz. Props aktarmayı biliyorsunuz. State'i yukarı taşımayı (lift state up) biliyorsunuz.

Ancak uygulamanız büyüdüğünde her şey bozulur. Verileri, ihtiyacı olmayan bileşenler (components) üzerinden aktarmaya başlarsınız. Bu, prop drilling'dir. Kodunuzu karmaşık hale getirir ve bakımını zorlaştırır.

Zustand bunu çözer. Uygulamanıza React bileşenlerinizin dışında paylaşılan bir state sağlar.

Şu şekilde düşünün:

Zustand olmadan: A Bileşeni props'ları B'ye aktarır, B props'ları C'ye aktarır ve C props'ları D'ye aktarır.

Zustand ile: Her bileşen doğrudan merkezi bir store ile iletişim kurar. Aracı yok. Prop drilling yok.

Bir Zustand store'u iki şeyden oluşur:

  • State: Verileriniz.
  • Actions: Verilerinizi değiştiren fonksiyonlar.

Hepsi bu kadar.

Zustand hızlıdır çünkü yalnızca değişen belirli veriyi kullanan bileşenleri yeniden render eder (re-render).

Verilerinizin sayfa yenilemesinden sonra da korunmasını istiyorsanız localStorage kullanın. localStorage yalnızca string sakladığı için, nesneleri (objects) kaydetmek için JSON.stringify, okumak için ise JSON.parse kullanmalısınız.

Bir auth store'u yapılandırmak için basit bir yol:

  • Kullanıcıyı ve token'ı localStorage'da saklayın.
  • Store'u ve tarayıcı depolamasını güncellemek için bir login fonksiyonu kullanın.
  • Her ikisini de temizlemek için bir logout fonksiyonu kullanın.

Redux ile nasıl karşılaştırılır?

Redux, dispatcher ve reducer'lar gerektirir. Çok fazla boilerplate kod içerir. Zustand ise bir fonksiyonu doğrudan çağırmanıza olanak tanır. Daha az zihinsel yük ve daha az kurulum gerektirir.

Kaçınılması gereken yaygın hatalar:

  • create fonksiyonunda bir nesne döndürmeyi unutmak. Nesneniz için parantez kullanın.
  • State nesnenizin içinde noktalı virgül kullanmak. Bunun yerine virgül kullanın.
  • Zaten bir string olan veriyi parse etmeye çalışmak.

State yönetimi kütüphaneleri state yönetmekle ilgili değildir. Karmaşıklığı yönetmekle ilgilidir.

Her API'yi ezberlemeye çalışmayı bırakın. Aracın çözmeye çalıştığı probleme odaklanın. Problemi anladığınızda, araç anlam kazanacaktır.

Kaynak: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11