learn react ui logoLearnReactUI
Zustand ile State Yönetimi

Zustand ile State Yönetimi

Global State Management  = Client State Management + Server State Management

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üphanelere ihtiyaç duyarız. Bu sayede karmaşıklığı arttırmadan problemlerimizi çözebiliriz. Bunlardan biride Redux en yakın olan Zustand kütüphanesidir.

[React Örnek Proje Mimarisi — 6 (Sunucu İletişiminin Mimariye Etkisi)](https://medium.com/frontend-development-with-js)

Bu kitapta Zustand in State Yönetim Aracı olarak Redux yerine kullanılıp kullanılamayacağını değerlendirmeye çalışacağım.

İçerik İndeksi

  1. Zustand

  2. Zustand, Redux Yerine Kullanılabilir mi?

    • 2.1 Basit Bir Örnek

    • 2.2 Neden Redux Yerine Zustand Kullanılabilir?

      • 2.2.1 Sade ve Kullanımının Basit Olması
      • 2.2.2 Zustand Custom Hook Yapısına Uygun Tasarlanmış
      • 2.2.3 Zustand Context Provider Üzerinden Çalışmıyor
      • 2.2.4 Birbirinden Uzak Bileşenler Diğer Bileşenleri Etkilemeden (Re-Render) gerektirmeden Çalışıyor.
    • 2.3 Neden Context Yerine Zustand?

      • 2.3.1 Less Boilerplate
      • 2.3.2 Re-Render konuları
      • 2.3.3 Centralized, action-based
  3. Zustand ile Middleware Kullanımları

    • 3.1 Örnek
    • 3.2 Store Slice Update Concept
    • 3.3 Redux DevTools Middleware
    • 3.4 Compose Middleware
    • 3.5 Persist Middleware
    • 3.6 Immer Middleware
  4. Zustand ile DevTool Kullanımı

    • 4.1 Basit Bir Örnek
  5. Re-Render Senaryoları ve Optimizasyon Yöntemleri

    • 5.1 Default, Atomic ve Shallow
    • 5.2 Default
    • 5.3 Atomic Yöntem
    • 5.4 Shallow Yöntem
    • 5.5 Örneği Genişletip Değiştiriyoruz
    • 5.6 Zustand Atomic Olarak Kapsamlı Store Yapılarında Nasıl Kullanabiliriz?
    • 5.7 Store prop ve fonksiyonlarına Erişim

Devamı

Okumaya devam etmek için e-kitabı indir (Download) düğmesine basınız.