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.

Referanslar

Svelte