Seletores e efeitos no NgRx

Nesta lição, você aprenderá sobre seletores e efeitos, partes essenciais do NgRx para o gerenciamento eficiente de estado no Angular.

O que são seletores?

Os seletores permitem recuperar com eficiência partes específicas do estado no Store, otimizando o acesso aos dados.

Criando seletores

Crie seletores usando a função createSelector() para selecionar dados do estado com eficiência:

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

Usando seletores nos componentes

Os seletores ajudam você a acessar facilmente os dados do Store dentro dos componentes:

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

O que são efeitos?

Os efeitos tratam efeitos colaterais no NgRx, como requisições HTTP, ouvindo ações e executando operações assíncronas.

Instalando efeitos

Instale o NgRx Effects usando:

npm install @ngrx/effects --save

Criando efeitos

Os efeitos tratam efeitos colaterais, como requisições HTTP disparadas por ações:

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

Registrando efeitos

Registre os efeitos no seu módulo para habilitá-los na aplicação:

EffectsModule.forRoot([UserEffects])

Resumo

Agora você entende os seletores e os efeitos no NgRx, o que permite tratar o estado e os efeitos colaterais com eficiência. Excelente trabalho!