NGRX Store, Angular Apps için bir durum yönetimi kitaplığıdır. Sayfa istekleri arasında bir oturum sürdürdüğümüz tek sayfalı uygulamalardan önce sunucuda oturum yönetimi yapıyorduk. Tek sayfalı uygulamalar söz konusu olduğunda, durumu korumak biraz zordur. NGRX mağazası ile daha kolay hale geliyor.
Hemen başlayalım ve NGRX Store'u kullanarak Angular ile durum yönetimini nasıl kurabileceğimize bakalım.
İşte bu makalede ele alacağımız şeyler
Örnek projeye bir göz atalım. Oturum açabileceğimiz, kaydolabileceğimiz ve görevler ekleyebileceğimiz, görevleri silebileceğimiz ve görevleri düzenleyebileceğimiz vb. Basit bir uygulamamız var. Tüm uygulama durumu NGRX ile korunur. Eylemlerimiz, etkilerimiz, indirgeyicilerimiz vb. Var. Hepsini bu örnekte göreceğiz.
İşte GitHub'da klonlayıp yerel makinenizde çalıştırabileceğiniz örnek proje.
// clone the project git clone https://github.com/bbachi/angular-ngrx-example.git // Run the API cd api npm install npm run dev // Run the Angular App cd ui npm install npm start
NGRX, Açısal Uygulamalar için yeniden düzenlemeden esinlenen bir durum yönetim aracıdır. Uygulamanız büyüdükçe ve büyüdüğünde iletişimin üstesinden gelmek zorlaşır. NGRX, tek yönlü veri akışı ve tüm uygulama için tek bir doğruluk kaynağı sağlar.
Mağazanın farkında olan bileşenlere akıllı bileşenler, mağazadan haberdar olmayan bileşenlere ise aptal bileşenler denir. Aşağıdaki şemaya bakarsanız, tüm akıllı bileşenler verileri mağazaya gönderir ve tüm uygulama için tek yönlü veri akışını teşvik ederek mağazadan veri alır.
Sayfanın yenilenmesi veya yeniden yüklenmesi, uygulamanın tüm durumunu kaybedecektir. İşte o zaman yerel depolama devreye giriyor. Uygulamanın tüm durumu, sayfanın yeniden yüklenmesinden hemen önce serileştirilir ve yerel depoya kaydedilir ve tüm durum yerel depolamadan serileştirilir ve uygulamanın durumu yeniden başlatılır. Buna mağazayı yeniden nemlendirme denir.
Bazen uygulamanın verilerini almak için API çağrıları yapmamız gerekir. Mağaza, arka uç API'sinden verilere ihtiyaç duyduğunda, bir API çağrısı yapmak, verileri almak ve mağazayı güncellemek için NGRX efektlerini kullanır. Bunu ilerideki bölümlerde detaylı olarak göreceğiz.
NGRX Store, açısal uygulamalar için Durum yönetimi sağlayan Redux'dan esinlenmiştir ve açısal uygulamaların performansını ve tutarlılığını artıran RXJS ile güçlendirilmiştir.
Nasıl çalıştığını görelim !!.
Bu makale için bazı ön koşullar vardır. Dizüstü bilgisayarınızda nodej'lerin kurulu olması ve http'nin nasıl çalıştığı gerekir. Pratik yapmak ve bunu dizüstü bilgisayarınızda çalıştırmak istiyorsanız, bunları dizüstü bilgisayarınızda bulundurmanız gerekir.
NGRX söz konusu olduğunda, bir sürü kütüphane kurmamız gerekiyor. NGRX için aşağıdaki tüm kütüphaneleri kuralım.
// install NGRX dependencies npm install @ngrx/{effects,entity,router-store,store,store-devtools} --save npm install ngrx-store-freeze ngrx-store-localstorage --save
Tüm uygulamanın API bölümünü adım adım uygulayalım. API, bir Nodejs ve ekspres çerçeve ile oluşturulmuştur. Bir oturum açma, kayıt olma, görev ekleme, görevleri silme, görevleri düzenleme ve görev işlemlerini alma hakkımız var.
Yukarıdaki diyagrama bakarsanız, Angular with NGRX mağazası NodeJS API'yi çağırır. İşte
server.jstüm işlemleri yapan ve 3080 portunda dinleyen dosya .
Herhangi bir dosya değişikliğini izlemek ve sunucuyu yeniden başlatmak için geliştirme ortamında nodemon kullanıyoruz.
npm run devNodejs sunucusunu geliştirme modunda başlatmak için bu komutu çalıştırmanız gereken tek şey.
Sunucuyu nodemon ile başlattığınız demo burada.
NGRX'i adım adım uygulayalım. İşte uygulama için NGRX yapısının şeması. Eylemlerimiz, azaltıcılarımız, efektlerimiz vb. Var.
Yukarıdaki diyagrama bakarsak, Angular Uygulamasındaki bileşenler, Eylemler göndererek NGRX Mağazasını çağırır. Eylemlerin API'yi çağırmak gibi yan etkileri varsa, etkiler aracılığıyla API'yi çağırır. API'den yanıtı aldığımızda, redüktörler aracılığıyla uygulamanın durumunu değiştiriyoruz. Buradaki redüktörler saf fonksiyonlardır, yani bunlar mevcut durumu alır ve mevcut durumu değiştirmeden yeni durumu verir.
Öncelikle Angular klasör yapısında durumu tanımlamamız gerekiyor. Genellikle uygulamanın durumu için ayrı bir klasör tutuyorum.
Giriş ve kayıt akışına ait tüm eylemler aşağıda tanımlanmıştır. Eylemler, türü ve yükü olan nesnelerdir. Yük burada isteğe bağlıdır. CreateAction ve props'un ngrx / store'dan içe aktarıldığına dikkat edin.
Bu, kayıt akışı için Eylemler dosyasıdır.
Oturum açma ve kayıt işlemleri, kullanıcıların kimliğini doğrulamak ve kaydetmek için API'yi çağırmalıdır. Yan etkileri işleyen etkileri tanımlamanız gerekir.
Bu efektler dosyasında iki fonksiyon tanımladık. Birincisi, oturum açma türündeki Eylem için, diğeri ise kayıt türündeki Eylem içindir. API çağrılarını çağırdığımızı ve yanıtı uygun Eylem yüküne eşlediğimizi görebilirsiniz.
İşte kullanıcı girişi ve kayıt akışı için azaltıcı. Aşağıdaki dosyayı fark ederseniz, başlangıç durumunu tanımlamışızdır. Her eylem için durumu buna göre değiştiriyoruz. Bileşenler için yararlı olan bazı verileri veren bazı işlevleri de dışa aktarıyoruz.
ToDo akışına ait tüm eylemler aşağıda tanımlanmıştır. Eylemler, türü ve yükü olan nesnelerdir. Yük burada isteğe bağlıdır. CreateAction ve props'un ngrx / store'dan içe aktarıldığına dikkat edin.
Yapılacak işlemlerin, API'den görevleri oluşturmak, silmek, düzenlemek ve almak için API'yi çağırması gerektiğinden. Yan etkileri işleyen etkileri tanımlamanız gerekir.
Bu efekt dosyasında dört fonksiyon tanımladık. Her CRUD işlemi için bir tane. API çağrılarını çağırdığımızı ve yanıtı uygun Eylem yüküne eşlediğimizi görebilirsiniz.
İşte yapılacak iş akışı için azaltıcı. Aşağıdaki dosyayı fark ederseniz, başlangıç durumunu tanımlamışızdır. Her eylem için durumu buna göre değiştiriyoruz. Bileşenler için yararlı olan bazı verileri veren bazı işlevleri de dışa aktarıyoruz.
İndirgeyicilerinizi ve dışa aktarma işlevlerinizi seçiciler yardımıyla tanımladığınız tam index.ts dosyası burada.
API ve NGRX uygulamalarını gördük. NGRX mağazasını Angular uygulamasına nasıl entegre edebileceğimizi görmenin zamanı geldi. Yapmamız gereken ilk şey, tüm NGRX ile ilgili kodu aşağıdaki gibi Uygulama modülüne veya özellik modülüne aktarmaktır.
Yukarıda görebileceğiniz gibi, efektleri içe aktarmamız gerekiyor ve NGRX Store'dan EffectsModule'a kaydolmamız gerekiyor. Eylemleri nasıl gönderebileceğimize ve mağaza değişikliklerini nasıl dinleyebileceğimize bir örnek görelim.
İşte ngrx deposunu içe aktardığımız giriş bileşeni ve yukarıda tanımladığımız eylemler.
Yukarıdaki bileşende olduğu gibi this.store.dispatch ile eylemler gönderiyoruz ve this.store.select gibi selektörler yardımıyla mağazadan okuyoruz.
İşte NGRX efektleri tarafından çağrılan API'ler
Yukarıda verilen Github bağlantısında örneğin geri kalanını kontrol edebilirsiniz.
Çok fazla standart kod olduğundan NGRX küçük Angular uygulamalar için değildir. Bu aynı zamanda herhangi bir Angular uygulamasında NGRX deposunu uygulamak için gereken çok fazla öğrenme eğrisidir. Bu yüzden akıllıca seçin.
Teknoloji dünyasında, işletmeler sürekli olarak siber suçluların şeytani faaliyetlerinin tuzağına düşme riski altındadır. Endişe verici derecede sık hale gelen böyle bir taktik, kimlik bilgilerini doldurmaktır.
Gündem: Giriş: TL; Ama okuyabilirim: A / B testi, CloudFront ve Lamba @ edge hakkında zaten bilginiz varsa, AWS Lambda @ edge ile doğrudan A / B testine gidin. A / B testi nedir? A / B testi, kullanıcıların bir web sitesinin iki farklı versiyonunun katılımını karşılaştırmaya odaklanan bir UX araştırma metodolojisidir.
Bugün AppStore'daki birçok uygulama, tablo görünümünü kaydırırken içeriği tablo görünümü başlığındaki ölçekleme gibi davranışlara sahiptir. Bu tür davranışlara nasıl ulaşabileceğimizin en basit yaklaşımını size göstereceğim.
İlk blogumda söz verdiğim gibi 'DOM Nedir?' burada 'DOM işleme' üzerine bir blog var. Bu blogda DOM'a daha fazla dalacağız ve DOM işlemenin ne olduğunu ve nasıl yapıldığını öğreneceğiz.
Node.js'de akışların nasıl çalıştığını hiç merak ettiniz mi? Sahiptim.