Zustand nedir ?

Merhaba herkese, temmuz ayında 4. yazımı yayınlamış bulunmaktayım. Bu benim için güzel haber çünkü öğrendikçe yazmayı ve uygulamayı seven biriyim. Yazılarımın okunması ve değerlendirilmesi beni mutlu ediyor.Bu yazımda ise size Zustand’tan bahsetmeye çalışacağım. Umarım sizler için keyifli ve yararlı bir yazı olur. Hazırsanız başlayalım.

State Management nedir ?

State, bir yazılım uygulamasında bulunan değişkenlerin veya verilerin anlık durumunu temsil eder.Örneğin, bir web uygulamasında kullanıcı adı, ürün içeriği, açılan bir menü durumu veya bir sepet içeriği gibi her türlü değişken veri, state olarak adlandırılır. State, uygulamadaki değişken verilerin güncel değerlerini tutar ve uygulama etkileşimleri veya işlemleri sonucunda sürekli olarak değişebilir.

State management ise bir uygulamada bulunan state’leri etkili ve düzenli bir şekilde yönetmek kullanılan bir yöntemdir. Uygulama büyüdükçe ve karmaşıklığı artınca bu durumu yönetmek zor olabilir. Component sayısı arttıkça uygulamanın yönetimi zorlaşıyor ve düzensiz bir proje yapısı ile karşılaşıyoruz. Bu durumu çözmek için açık kaynak global state kütüphanelerine yöneliyoruz. Bazı state management kütüphaneleri:

• Redux
• Akita
• MobX
• Zustand
• Vuex
• React Context

Zustand..

Zustand bir state management aracıdır, Github’ta şuan 33k star’ı var ve gittikçe popüler olmaya devam etmekte. Zustand’ın basit ve hızlı bir yapıya sahip olması tercih edilme sebeplerinden.

Redux vs Zustand

En popüler state management kütüphanelerinden olan Redux ile zustand’ın avantajlarına ve dezavantajlarına bakalım.

1. Zustand daha basit bir yapıya sahip
2. Öğrenme eğrisi daha kolay
3. Karmaşıklık daha az
4. Kod miktarı daha az
5. Küçük projelerde daha iyi performans sağlar
6. Zustand hooks tabanlı
7. Provider ile sarmalamaya gerek yok.

Zustand ile sayaç uygulaması

Şimdi beraber dokümantasyonla ilerleyip bir React ve zustand ile bir counter app yapalım.

1- Projemizi oluşturalım ( npx create-react-app counter-app)

2- Zustand kütüphanesini yükleyelim.

npm install zustand // or yarn add

3- Store oluşturalım

4- component oluşturalım.

Bear.js adında bir component oluşturuyorum.

5- Component’i app.js dosyasının içerisinde çağırıyoruz ve npm start yaparak projeyi çalıştırıyoruz ve counter app hazır.

Son

Zustand hakkında yazım bu kadardı ilerledikçe ve derinleştikçe zustand hakkında yazılarıma devam edeceğim. Umarım keyifli bir şekilde okumuşsunuzdur, eleştirileriniz ve önerileriniz için şimdiden teşekkür ederim.

Görüşmek üzere !

Yazılarıma destek olmak için https://www.buymeacoffee.com/devebrar