FRONTEND KAPSAM
Frontend Ürün ve Kütüphane Evreninden Haberler — 2 (xState ve State Designer)
Kayıtlı olduğum bazı sitelerden haftalık, aylık Haber Bülteni olarak bir çok mail atılıyor. Bu yazıda bu bültenlerden önemli gördüğüm ürün haberlerini paylaşıyor olacağım. Her yazıda 2 ürünü inceliyor olacağım.
Bugünkü yazıda UI uygulamaları için çok önemli yer teşkil eden State yönetimine faydalı 2 kütüphaneden bahsedeceğim.
Şu ana kadar State yönetimi için Redux’ tan bahsettik genelde. Bu konuda daha önceden yazmış olduğum aşağıdaki yazılara göz gezdirebilirsiniz.
- Flux Mimarisi
- Redux Thunk ve Saga
- React Virtual DOM 2 Uzak Bileşeni Konuşturalım
- React ile Rest API Cağırımı
Redux yapılarına alternatif GraphQL ve Apollo Client benzeri uygulama state yönetmekte birçok kütüphane şu anda mevcut. Hatta React kütüphanesi Hooks ile birlikte State,Context ile birlikte Redux basit bir hali useReducer React kütüphanesi içerisinden direk kullanılabilir hale geldi.
Tabi useReducer ve useContext konusunun React-Redux direk bir karşılık olamayacağını aşağıdaki yazıda bahsetmiştim.
Tüm yukarıda bahsettiğim kütüphaneler state yönetimi için kütüphaneler olsa bile kompleks state yönetimlerini;
- oluşturmak,
- bileşenler ile hızlı şekilde bağlamak,
- görselleştirmek
- simule edebilmek için geliştirilmiş xState ve State Designer benzeri kütüphaneler bulunur.
xState
- xState kütüphanesi Sonlu Durum Makinesi kurmanızı ve bu Makine üzerinden bileşeninizi yönetecek useMachine hook ve görselleştirme aracı sağlar.
Bu durum makinesi üzerinden bileşen yönetimi yapılarak State mekanizmasının iş mantıkları bileşen içerisinden ayrıştırılarak soyutlanır.
Basit State Machine (Durum Makinelerinden) çok daha kompleks Durum makineleri oluşturmanızıda sağlar.
State Designer
StateDesigner kütüphanesi bu kompleks yapıları yönetmek State,View,Static ve Test üzerinden bileşen geliştirebilmenizi ve bu bileşeni simüle ederek, eventleri tetikleyerek görebilmenizi sağlıyor.
Peki nasıl kod geliştiriyoruz. useStateDesigner hook ile tüm state ve event yapısını tasarlıyorsunuz. Daha sonra bileşeninizi bu yapıya bağlıyorsunuz.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
