NgRx'te Selector'lar ve Effect'ler

Bu derste, Angular'da verimli durum yönetimi için NgRx'in önemli parçaları olan selector'lar ve effect'ler ele alınır.

Selector'lar Nedir?

Selector'lar, store'daki belirli durum parçalarını verimli bir şekilde almanızı ve veri erişimini iyileştirmenizi sağlar.

Selector'lar Oluşturma

Durumdan verileri verimli bir şekilde seçmek için createSelector() işlevini kullanarak selector'lar oluşturun:

export const selectUser = createSelector(
  (state: AppState) => state.user,
  (user) => user.details
);

Bileşenlerde Selector Kullanma

Selector'lar, bileşenler içinde store verilerine kolayca erişmenize yardımcı olur:

this.store.select(selectUser).subscribe(user => console.log(user));

Effect'ler Nedir?

Effect'ler, eylemleri dinleyip eşzamansız işlemler gerçekleştirerek HTTP istekleri gibi yan etkileri NgRx içinde yönetir.

Effect'leri Yükleme

NgRx Effect'lerini şunu kullanarak yükleyin:

npm install @ngrx/effects --save

Effect'ler Oluşturma

Effect'ler, eylemler tarafından tetiklenen HTTP istekleri gibi yan etkileri yönetir:

loadUser$ = createEffect(() =>
  this.actions$.pipe(
    ofType(loadUser),
    mergeMap(() => this.userService.getUser().pipe(
      map(user => loadUserSuccess({ user }))
    ))
  )
);

Effect'leri Kaydetme

Uygulamanızda etkinleştirmek için effect'leri modülünüze kaydedin:

EffectsModule.forRoot([UserEffects])

Özet

Artık NgRx'te selector'ları ve effect'leri anlıyor, durum ile yan etkileri verimli bir şekilde yönetebiliyorsunuz. Mükemmel iş!