Herkese merhabalar. Bir başka önemli bir konu ile karşınızdayım. Bu konunun ilginizi çekebileceğini düşünmekteyim. Zira günümüz teknolojileri arasında artık Javascript frameworklerinin ve Redux’ın yeri çok çok ayrıdır. State ve Store Management entegrelerini Redux sayesinde yönetirsiniz.
State yönetimini Ngrx sayesinde çok güzel bir şekilde yapabilirsiniz. Fakat öncelikle State Management kavramının ne anlama geldiğini ele alalım.
State Management Nedir ?
State kavramı günümüz javascript teknolojilerinde kullanılması zorunlu olan bir yapıdır. Kısa ve öz olarak değerlendirmek gerekirse, State Management sayesinde siz servisinize yani API’nize tekrar tekrar istek atmanıza gerek kalmaz, servisinize bir kere gidip ve verilerinizi bir kere çekmeniz yeterlidir. Daha sonra servisten aldığınız verileri State’inize kaydedersiniz ve State’deki elemanları global olarak tüm compenentlerinizde kullanabilirsiniz. Kısa ve öz olarak State Management tam anlamıyla budur.
Örnek
Fikir vermesi açısından şöyle bir örnek vermek istiyorum. Twitter veya Facebook benzeri bir web projesi geliştiriyorsunuz. Takdir edersiniz ki dakikada hatta saniyede binlerce tweet veya post atılıyor. Siz her sayfada verilerinizi getirmek için API’nize istek atarsınız bu çok maliyetli olacaktır. Hem sistem yorulacaktır hemde sitenizin performansı bir hayli düşecektir. İşte bu kısımda siteye ilk defa giren kullanıcı API’ye bir defa istek atar ve geriye dönen postları veya tweetleri state’e kaydederek, diğer sayfalarda gezinirken bu state üzerinden verileri çeker veya işlem yapar.
State Management’ı kontrol ederken yardımcı Ngrx’de yardımcı entegreler bulunmaktadır. Bunlar sırasıyla, Actions, Store, Reducer, Effects, Selector ve son olarak State olarak ele alınır.
Ngrx Actions
Actions, NgRx’teki ana yapı taşlarından biridir. Actions , uygulamanız boyunca gerçekleşen benzersiz olayları ifade eder. Sayfa ile kullanıcı etkileşimi, servisiniz ile iletişime geçmeniz için kullanılan sistemdir.
Ngrx Reducer
Reducer’lar ise hangi action’ın hangi state elementinde değişiklik yapacağını söyleyen, belirten bir sistemdir. Örneğin LoadSuccess Actionu eğer çağırılırsa state’deki tweet array’ine servisten gelen değeri eklesin. Bu örnek biraz zor gelebilir fakat ilerleyen zamanlarda uygulamalı olarak paylaşımlar yapacağım, o vakit daha iyi anlaşılacaktır.
Ngrx Effects
Effect sistemi bence çok önemli sistemlerden birisidir ve kullanımı sayesinde bir çok kolaylık sağlar. Effect’ler sayesinde bir action tetiklemesini sağlayabiliriz, yani örneğin oluşturduğunuz Action Type’larından biri çağırılırsa yapılacak, gerçekleştirilecek olayları oluşturabilirisiniz.
Dediğim gibi bu örnekler ile Angular Ngrx sisteminin anlaşılması biraz zor fakat ilerleyen aşamalarda bu konu hakkında daha fazla paylaşım ekleyeceğim.
Ngrx Selectors
Ngrx Selector’lar ise State’deki bir elemente erişmek için kullanılan yardımcı birer entegrelerdir. Örneğin, servisinizden gelen verileri State’inize ekledikten sonra, o verileri State’den çekmek için kullanılır.
