Zustand Nedir ?
Zustand, Jotai ve React springs geliştiricileri tarafından oluşturulmuş hızlı ve ölçeklenebilir bir durum yönetimi kütüphanesidir.
React uygulamaları büyüdükçe componentler arası state yönetimi ve propslar ile veri taşıma oldukça zor bir duruma gelebiliyor.
React ile bu karmaşıklığın önüne geçebilmek için Context-redux-recoil-react-query gibi birçok yardımcı araç kullanıyoruz.
Zustand aynı çözümü daha basit bir şekilde sunan yardımcı araçlardan bir tanesi.
Zustandı react context üzerinde kullanmanın bazı avantajları :
- Başlangıçta oluşturulan dosya kümesi ve diğer componentler üzerindeki düzenlemeler çok daha azdır. Yani context oluştururken providerlar ile ilgili düzenlemeler yapar, başlangıç şablonu için oldukça zaman harcarız. Bu durum zustand ile çok daha basittir.
- Componentler sadece değişiklik olduğunda render edilir.
- Merkezi bir yapıya sahiptir. Tüm değişken ve fonksiyonlar oluşturulan store içerisinden rahatlıkla kontrol edilebilir.
Zustand kütüphanesini anlatırken yapmış olduğum ufak bir örnek proje üzerinden ilerleyeceğim.Projenin linkini yazımın sonunda bulabilirsiniz.
Zustand ile Todo App
Proje için kullandığım dosya yapısı.
npx create-react-app zustand-todoappnpm install zustand //zustand kütüphanesi
npm install moment //Tarih düzenlemesi için
Css kütüphanesi olarak vanillaframework kütüphanesini kullandım.
stores → todoStore.js dosyasında gerekli durumların oluşturulması.
Oluşturduğum todoları saklamak için kullandığım Todos: [] dizisi,
Todo ekleyip silebileceğim ve durum bilgisinin tanımlandığı addTodo, deleteTodo, completeTodo fonksiyonları.
Daha basit bir kullanımını göstermek için Darkmode için ayrı bir durum deposu da oluşturdum.
Tanımladığımız bu değişkenleri componentlerde çağırıp kullanmak için :
import { todoStore } from "../stores"const todos = todoStore((state) => state.todos)
const addTodo = todoStore((state) => state.addTodo)
const deleteTodo = todoStore((state) => state.deleteTodo)
const completed = todoStore((state) => state.completeTodo)
Oluşturduğumuz store dosyaları üzerinden istediğimiz değişkenleri ve fonksiyonları çekip ihtiyaç duyduğumuz componentlerde kullanabiliriz.
Zustand create metodu dışında birçok özelliği de sahip. Context,redux kullanmaktan vazgeçemeyenler için de seçenekler mevcut. Ayrıca middileware metodları ile birçok aracın özelliklerinden faydalanabiliyoruz. Detaylı incelemek isteyenler için Zustand github sayfası.
Sonuç
Zustand durum yönetimi için hazırlanmış oldukça etkili ve kullanımı kolay bir kütüphane. Her geçen gün yazılım dillerinin evrimleştiğini ve giderek kullanıcı dostu olduğunu görüyoruz. İşimizi kolaylaştıran ve zaman tasarrufu sağlayan yeniliklere her zaman açık olmak bizleri bir adım daha ileriye götürür.Hep birlikte daha ileriye :)
