Ngrx | Angular

Ngrx | Angular

https://www.youtube.com/watch?v=yCac7PRG6R4

Primeiro criamos o arquivo *.action.ts

Por exemplo, no contexto de cursos seris courses.action.ts

import { createAction, props } from "@ngrx/store";
import { Course } from "./model/course";

export const loadAllCourses = createAction(
	"[Course Resolver] Load All Courses",
);

export const allCoursesLoaded = createAction(
	"[Load Course Effect] All Courses Loaded",
	props<{ courses: Course[] }>(),
);

Segundo cria-se action-types.ts

import * as CourseActions from './course.action';

export {CourseActions}

Terceiro cria courses.resolver.ts
```
import { Injectable } from "@angular/core";
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from "@angular/router";

@Injectable()
export class CoursesResolver implements Resolve<any>{

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

  }
}
```
- No rounting do module, tem que adicionar a configuração também e no provider da classe
```
{
    path: '',
    component: HomeComponent,
    resolve: {
      courses: CoursesResolver
    }

  },
```
- Quarto cria se os effects e adiciona no module dentro dos imports
```
  @Injectable()
  export class CoursesEffects {
    loadCourses$ = createEffect(() =>
      this.actions$.pipe(
        ofType(CourseActions.loadAllCourses),
        concatMap(action => this.coursesHttpService.findAllCourses()),
        map(courses => allCoursesLoaded({ courses })),
      ),
    );
  
    constructor(
      private actions$: Actions,
      private coursesHttpService: CoursesHttpService,
    ) {}
  }
```
Explicação

NgRx Practical Examples

NgRx Building Blocks Cheat Sheet
- Actions express unique events that happen throughout your application.
- Selectors are pure functions used for obtaining slices of store state.
- Reducers in NgRx are responsible for handling transitions from one state to the next state in your application.
- Effects use streams to provide new sources of actions to reduce state based on external interactions such as network requests, web socket messages, and time-based events.
- Store is a controlled state container designed to help write performant, consistent applications on top of Angular.
- Algums exemplos para se manter no “Store”
  - • JSON data returned from GET calls
  - • The current state of an accordion (open/closed)
  - • The user’s logged-in status
  - • Current color theme of the application
  - • User account settings
- selector → usa quando você precisa buscar algumas coisa que esteja no store
- sempre precisamos de uma interface sobre o estado e o valor inicial dela. Exemplo
```
export interface IAuthState {
  user: User;
}

export const initialAuthState: IAuthState = {
  user: undefined,
};
```
Effects
- Em uma aplicação angular, é necessário lidar com ações impuras. Ações impuras podem ser solicitação de rede, mensagens de soquete da web e eventos baseados em tempo. Em um aplicativo angular baseado em serviço, os componentes são responsáveis por interagir com recursos externos por meio de serviços. Os efeitos fornecem uma maneira de interagir com esses serviços, a fim de isolá-los do componente. Eles lidam com tarefas como buscar dados, executar tarefas que produzem vários eventos e outras interações externas em que os componentes não precisam de conhecimento explícito de tais interações. Em outras palavras
Reducers
- Os redutores são funções responsáveis pelo tratamento de transições de um estado para o próximo estado em um aplicativo. São funções puras no sentido de que produzem a mesma saída para uma determinada entrada. Eles fazem isso sem nenhum efeito colateral, lidando com a transição do estado de forma síncrona. Cada função de redutor leva a Ação mais recente enviada para o estado atual. Ele determina se deve retornar um estado modificado ou o estado original.

Explicação​

NgRx Building Blocks Cheat Sheet

Effects​

Reducers​

Explicação

Effects

Reducers