Svelte Global State Yönetimi
Giriş
Global state’leri frontend tarafında yönettiğimizde, örneğin React’te çoğu durumda React Hooks veya Redux kullanırız. Ancak Redux’ın uygulanması karmaşıktır. React Hooks bu konu da biraz daha iyi olsa da, Svelte ile bunu daha kolay yapabiliriz.
Bir kaç yıldır React kullanıyorum. Global state yönetimi benim için çok can sıkıcı olduğundan kişisel projelerimde Svelte kullanmaya karar verdim.
Svelte’de global state yönetimi React’ten çok daha kolaydır.
Sırasıyla inceleyelim.
Svelte Projesi Oluşturma
npm create svelte my-app
cd my-app
npm install
npm run dev -- --open
Daha detaylı bilgi için resmi Svelte sayfası’na göz atabilirsiniz.
Src Dizininde stores.js Dosyası Oluşturun
İlk olarak, src dizininde, global durumları bildiren ve depolayan bir JavaScript dosyası oluşturun.
Dosya adını, store.js veya globalState.js vb. gibi dilediğiniz şekilde yazabilirsiniz.
Writable Kullanarak Global State Değişkenlerini Bildirin
Bu şekilde, bu değeri kullanabilir ve projede herhangi bir yerde her zaman değiştirebiliriz.
Global State Kullanımı
Global state değerlerini $ ön eki ekleyerek kullanabiliriz. Örneğin, Home.svelte’de:
Global State’i Güncelleme
State’leri değiştirmek de oldukça kolaydır. Tek yapmamız gereken, global state’leri içe aktarmak ve onlara yeni değerler atamak. Örneğin, About.svelte’de:
Sonuç
Deneyimledikten sonra, Svelte kullanımı oldukça basit ve kolaydır.
Svelte’in uyarlanabilirliği, durum yönetimini bir dereceye kadar ele almanızı gerektirebilecek küçük ölçekli uygulamalar oluştururken kullanmak için harika bir seçimdir.