Selectors dan Effects di NgRx

Pelajaran ini membahas selectors dan effects, bagian penting dari NgRx untuk manajemen status yang efisien di Angular.

Apa Itu Selectors?

Selectors memungkinkan Anda mengambil bagian status tertentu dari store secara efisien sehingga akses data menjadi lebih optimal.

Membuat Selectors

Buat selectors menggunakan fungsi createSelector() untuk memilih data dari status secara efisien:

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

Menggunakan Selectors dalam Komponen

Selectors membantu Anda mengakses data store dengan mudah di dalam komponen:

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

Apa Itu Effects?

Effects menangani efek samping dalam NgRx, seperti permintaan HTTP, dengan mendengarkan actions dan menjalankan operasi asinkron.

Memasang Effects

Pasang NgRx Effects menggunakan:

npm install @ngrx/effects --save

Membuat Effects

Effects menangani efek samping seperti permintaan HTTP yang dipicu oleh actions:

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

Mendaftarkan Effects

Daftarkan effects di modul Anda agar dapat digunakan dalam aplikasi:

EffectsModule.forRoot([UserEffects])

Ringkasan

Sekarang Anda memahami selectors dan effects dalam NgRx, sehingga Anda dapat menangani status dan efek samping secara efisien. Kerja luar biasa!