Angular NgRX Kullanımı

Herkese merhaba. Bu yazım da NgRx’ten bahsedeceğim. Ardından ufak bir uygulama yapıp yazıyı bitireceğim.

NgRX Nedir?

NgRx temelinde redux bulunan uygulamanızda ki state(yani bir web uygulamasına girdiğinizde kullanıcı bilgileri, web içerikleri gibi bilgileri)’i tek bir yerden etkili bir şekilde yönetmenizi sağlayan bir araçtır.

Bu yazımda @ngrx/store’dan bahsedeceğim.

Store

Yukarıda bahsettiğim web uygulaması hakkındaki bilgileri burada saklar. Burada dikkat edilmesi gereken nokta ise store immutable ‘dir. Bu yüzden buraya yazılan değerleri değiştiremeyiz.

Store temelde 3 parçadan oluşur.

• Actions
• Reducers
• Selectors

Actions state üzerinde yapılacak işlemi belirtir. Bu işlemin ismi uniq olmalı ve yapılacak işlemi belirtmelidir. Component’ten ya da service’den tetiklenebilir.

Örnek bir action tanımı

props kullanıcıdan gelecek olan veriyi temsil eder. Herhangi bir veri işlenmeyecekse koymaya gerek yok.

Reducers state’i değiştirip yeni bir state oluşturmaya yarar. State üzerinde yapacağımız işlemleri burada yaparız.

methodlarımızı oniçerisinde yazarız. İlk parametre bizim hangi Action tetiklendiğinde çalışacağı, ikinci paremetrede methodumuzu yazarız. Bu metot ile yeni bir state oluştururuz.

Selectors bizim statelerimizde ki hangi state’i seçeceğimizi yazarız

Angular: NGRX a clean and clear introduction

Buraya kadar ngRx’i biraz tanımış olduk. Şimdi gerekli kurulumları yapalım. Ardından ufak bir kitap ekleme ve silme uygulaması yapalım.

İlk olarak yeni bir uygulama oluşturalım.

ng new bookStoreApp

Ardından aşağıdaki komutlar ile ngRx’i projemize dahil edelim.

npm install @ngrx/schematics --save-dev
ng add @ngrx/store
ng add @ngrx/store-devtools
ng add @ngrx/effects

Kitap ekleme ve silme için componentlerimizi oluşturalım.

ng g c book-list
ng g c add-book
ng g c delete-book

Şeklinde 3 tane componentimi oluşturuyorum. Ardından src/app dizinin altına state adında bir klasör oluşturuyorum. İçerisine app.action.ts app.reducer.ts app.selector.ts adında dosyalarımı oluşturuyorum. Bunları elle yapmak yerine aşağıdaki komut ile angular bizim yerimize gerekli dosyaları oluşturup gerekli şeyleri app.module.ts dosyama ekliyor.

ng generate @ngrx/schematics:feature +state/app --module=app

Kurulumları yaptığımıza göre uygulamamıza geçelim. Bu yazım giriş niteliğinde olduğu için herhangi bir servise bağlanmayacağım.

İlk olarak actionlarımızı yazarak başlayalım. Bunun için state/app.actions.ts dosyamı açıyorum.

Dikkat ederseniz props ile action tetiklendiğinde ihtiyacı olacak veriyi belirtiyorum.

Şimdi state/app.reducer.ts dosyamızı düzenleyelim.

export interface State ile gelecek verilerin ne olacağını belirtiyorum. interface ismi state olmak zorunda değil!

initialState ile uygulama ilk açıldığında yüklenmesini istediğim verileri veriyorum. Boş bırakabilirsiniz ben herhangi bir api den çekmeyeceğim için direk verdim.

Dikkat etmemiz gereken diğer bir nokta da her zaman yeni bir state oluşturduğumuz!!

Actionlarımız hazır, reducerimiz hazır sıra geldi selectorleri yazmaya :)

what is ngrx createSelector and createFeatureSelector?

Buraya kadar state’i oluşturduk şimdi componentlerimizi oluşturalım. Ardından componentler içerisinden nasıl tetikleyeceğimize bakalım.

book-list componenti içerisinde yukarıdaki gibi çıktı vermek istiyorum. Bunun için book-list.component.html dosyamı aşağıdaki gibi düzenliyorum.

Burada dikkat etmeniz gereken nokta state’ten gelen bilgiler observable olarak geliyor. Burdan gelen bilgileri yazdırmak için async pipe’ını kullanmayı unutmayın.

Store’a erişebilmek için Store servisi ts dosyama dahil ediyorum. Store observable olduğu için pipe kullanabiliyorum.

Artık state içerisindeki kitapları alıp listeleyebiliyorum. Hadi şimdi yeni kitap eklemeye kısımını yapalım.

Kitap idsi, adı ve yazarı olarak 3 tane textbox koyuyorum. Buradaki değerlere erişmek için reactive forms kullanıyorum.

ReactiveFormsModule ‘ü app.module.ts ‘e eklemeyi unutmayın.

dispatch ile addBook action’ı tetikliyorum. Yazdığımız state/app.action.ts dosyasında 10.satıra bakarsanız orada props ta istediğimiz değeri component içerisinden veriyoruz. Ardından kullanıcıyı anasayfaya yönlendiriyoruz.

Bunu da hallettikten sonra kitap silme işini yapıp yazımızı bitirelim.

delete-book componentime geliyorum. Silmeden önce hangi kitabın silineceğini kullanıcıya gösteriyorum. Delete butonuna tıklayınca confirm çıkıyor. Eğer yanıtı evet olursa kitabı siliyoruz.

Böylece basit bir şekilde NgRx nasıl kullanır öğrenmiş olduk. Buraya kadar okduğunuz için teşekkür ederim.

Github: https://github.com/okanyesil/medium-yazi/tree/ngrx/todoApp/todoApp