Selectors y effects en NgRx

En esta lección se explican los selectors y los effects, componentes esenciales de NgRx para gestionar el estado de forma eficiente en Angular.

¿Qué son los selectors?

Los selectors permiten recuperar eficazmente partes específicas del estado desde el store, lo que optimiza el acceso a los datos.

Creación de selectors

Cree selectors mediante la función createSelector() para seleccionar datos del estado de forma eficiente:

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

Uso de selectors en componentes

Los selectors le ayudan a acceder fácilmente a los datos del store desde los componentes:

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

¿Qué son los effects?

Los effects gestionan los efectos secundarios en NgRx, como las solicitudes HTTP, al escuchar actions y realizar operaciones asíncronas.

Instalación de effects

Instale NgRx Effects mediante:

npm install @ngrx/effects --save

Creación de effects

Los effects gestionan efectos secundarios, como las solicitudes HTTP activadas por actions:

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

Registro de effects

Registre los effects en su módulo para habilitarlos en la aplicación:

EffectsModule.forRoot([UserEffects])

Resumen

Ahora comprende los selectors y los effects en NgRx, lo que le permite gestionar el estado y los efectos secundarios de forma eficiente. ¡Excelente trabajo!