effects terminado

package.json

@@ -18,12 +18,15 @@
     "@angular/platform-browser": "~13.0.0-next.0",
     "@angular/platform-browser-dynamic": "~13.0.0-next.0",
     "@angular/router": "~13.0.0-next.0",
+    "@ngrx/effects": "^13.2.0",
+    "@ngrx/store": "^13.2.0",
+    "@ngrx/store-devtools": "^13.2.0",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.0.0",
+    "@angular-devkit/build-angular": "^13.3.8",
     "@angular/cli": "~13.0.0",
     "@angular/compiler-cli": "~13.0.0-next.0",
     "@types/jasmine": "~3.10.0",

src/app/app.module.ts

@@ -1,20 +1,33 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from "@angular/common/http";
+import { StoreModule } from "@ngrx/store";
 
 import { AppComponent } from './app.component';
+import { appReducer } from "./store/app.reducers";
+import { EffectsModule } from "@ngrx/effects";
+import { StoreDevtoolsModule } from "@ngrx/store-devtools";
 
 // Modulos personalizados
 import { SharedModule } from "./shared/shared.module";
 import { UsuariosModule } from "./usuarios/usuarios.module";
 import { AppRoutingModule } from "./app-routing.module";
+import { environment } from "../environments/environment";
+import { EffectsArray } from "./store/effects";
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
+    StoreModule.forRoot( appReducer ),
+    EffectsModule.forRoot( EffectsArray ),
+    StoreDevtoolsModule.instrument({
+      maxAge: 25, // Retains last 25 states
+      logOnly: environment.production, // Restrict extension to log-only mode
+      autoPause: true, // Pauses recording actions and state changes when the extension window is not open
+    }),
     AppRoutingModule,
     HttpClientModule,
     SharedModule,

src/app/services/usuario.service.ts

@@ -1,6 +1,8 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from "@angular/common/http";
+import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
+import { Usuario } from "../models/usuario.model";
 
 @Injectable({
   providedIn: 'root'
@@ -11,10 +13,16 @@ export class UsuarioService {
 
   constructor(private  http: HttpClient ) { }
 
-  getUsers(){
+  getUsers(): Observable<Usuario[]>{
    return this.http.get(`${ this.url }/users?per_page=6`).pipe(
      map( (respuesta: any) => respuesta['data'] )
    )
   }
 
+  getUserById( id: string ): Observable<Usuario>{
+   return this.http.get(`${ this.url }/users/${ id }`).pipe(
+     map( (respuesta: any) => respuesta['data'] )
+   )
+  }
+
 }

src/app/store/actions/index.ts

@@ -0,0 +1,2 @@
+export * from './usuarios.actions'
+export * from './usuario.actions'

src/app/store/actions/usuario.actions.ts

@@ -0,0 +1,26 @@
+import { createAction, props } from '@ngrx/store';
+import { Usuario } from "../../models/usuario.model";
+
+enum USUARIO_ACTIONS {
+  USUARIO_CARGAR         = '[Usuario] Cargar Usuario',
+  USUARIO_CARGAR_SUCCESS = '[Usuario] Cargar Usuario Success',
+  USUARIO_CARGAR_ERROR   = '[Usuario] Cargar Usuario Error',
+}
+
+export const cargarUsuario =
+  createAction<USUARIO_ACTIONS.USUARIO_CARGAR, { id: string }>(
+    USUARIO_ACTIONS.USUARIO_CARGAR,
+    props<{ id: string }>()
+  );
+
+export const cargarUsuarioSuccess =
+  createAction<USUARIO_ACTIONS.USUARIO_CARGAR_SUCCESS, { usuario: Usuario }>(
+    USUARIO_ACTIONS.USUARIO_CARGAR_SUCCESS,
+    props<{ usuario: Usuario }>()
+  );
+
+export const cargarUsuarioError =
+  createAction<USUARIO_ACTIONS.USUARIO_CARGAR_ERROR, { payload: any }>(
+    USUARIO_ACTIONS.USUARIO_CARGAR_ERROR,
+    props<{ payload: any }>()
+  );

src/app/store/actions/usuarios.actions.ts

@@ -0,0 +1,25 @@
+import { createAction, props } from '@ngrx/store';
+import { Usuario } from "../../models/usuario.model";
+
+enum USUARIOS_ACTIONS {
+  USUARIOS_CARGAR         = '[Usuarios] Cargar Usuarios',
+  USUARIOS_CARGAR_SUCCESS = '[Usuarios] Cargar Usuarios Success',
+  USUARIOS_CARGAR_ERROR   = '[Usuarios] Cargar Usuarios Error',
+}
+
+export const cargarUsuarios =
+  createAction<USUARIOS_ACTIONS.USUARIOS_CARGAR>(
+    USUARIOS_ACTIONS.USUARIOS_CARGAR
+  );
+
+export const cargarUsuariosSuccess =
+  createAction<USUARIOS_ACTIONS.USUARIOS_CARGAR_SUCCESS, { usuarios: Usuario[] }>(
+    USUARIOS_ACTIONS.USUARIOS_CARGAR_SUCCESS,
+    props<{ usuarios: Usuario[] }>()
+  );
+
+export const cargarUsuariosError =
+  createAction<USUARIOS_ACTIONS.USUARIOS_CARGAR_ERROR, { payload: any }>(
+    USUARIOS_ACTIONS.USUARIOS_CARGAR_ERROR,
+    props<{ payload: any }>()
+  );

src/app/store/app.reducers.ts

@@ -0,0 +1,12 @@
+import { ActionReducerMap } from "@ngrx/store";
+import * as reducers  from './reducers';
+
+export interface AppState {
+  usuarios: reducers.UsuariosState,
+  usuario: reducers.UsuarioState
+}
+
+export const appReducer: ActionReducerMap<AppState> = {
+  usuarios: reducers.usuariosReducer,
+  usuario: reducers.usuarioReducer
+}

src/app/store/effects/index.ts

@@ -0,0 +1,5 @@
+import { UsuariosEffects } from "./usuarios.effects";
+import { UsuarioEffects } from "./usuario.effects";
+
+
+export const EffectsArray = [UsuariosEffects, UsuarioEffects]

src/app/store/effects/usuario.effects.ts

@@ -0,0 +1,44 @@
+import { Injectable } from "@angular/core";
+import { Actions, createEffect, ofType } from "@ngrx/effects";
+import * as usuarioAction from "../actions";
+import { catchError, map, mergeMap, tap } from "rxjs/operators";
+import { UsuarioService } from "../../services/usuario.service";
+import { of } from "rxjs";
+
+@Injectable()
+export class UsuarioEffects {
+  constructor(
+    // estos actions son observables que estan pediente de todas las acciones que se disparan
+    private actions$: Actions,
+    // Osea actions$: es un observable que esta escuchando las acciones
+    private usuarioService: UsuarioService
+  ) {
+  }
+
+  cargarUsuario$ = createEffect(
+    () => this.actions$.pipe(
+      // Ojo no lo estoy llamando, solo que lo evalue
+      ofType( usuarioAction.cargarUsuario ),
+      // tap( console.log ),
+      // uso el mergmap para unir el la informacion del obsevable del servicio a la solicitud anterior
+      mergeMap(
+        ({ id, type } ) => this.usuarioService.getUserById(id).pipe(
+          // tap(console.log)
+          map( user => usuarioAction.cargarUsuarioSuccess({ usuario: user }) ),
+          catchError( err => of(usuarioAction.cargarUsuarioError({payload: err })) )
+        )
+      )
+    )
+  )
+}
+/* Nota:
+
+si el callback del createEffect quedara:
+--------------------------------------------
+  cargarUsuario$ = createEffect(
+    () => this.actions$
+  )
+--------------------------------------------
+esa accion se dispararia en todas las acciones que exitan / pasen por el store. Tengo que hacer que este pendiente de una accion en particular
+
+*/

src/app/store/effects/usuarios.effects.ts

@@ -0,0 +1,44 @@
+import { Injectable } from "@angular/core";
+import { Actions, createEffect, ofType } from "@ngrx/effects";
+import * as usuariosActions from "../actions";
+import { catchError, map, mergeMap, tap } from "rxjs/operators";
+import { UsuarioService } from "../../services/usuario.service";
+import { of } from "rxjs";
+
+@Injectable()
+export class UsuariosEffects {
+  constructor(
+    // estos actions son observables que estan pediente de todas las acciones que se disparan
+    private actions$: Actions,
+    // Osea actions$: es un observable que esta escuchando las acciones
+    private usuarioService: UsuarioService
+  ) {
+  }
+
+  cargarUsuarios$ = createEffect(
+    () => this.actions$.pipe(
+      // Ojo no lo estoy llamando, solo que lo evalue
+      ofType( usuariosActions.cargarUsuarios ),
+      // tap( console.log ),
+      // uso el mergmap para unir el la informacion del obsevable del servicio a la solicitud anterior
+      mergeMap(
+        () => this.usuarioService.getUsers().pipe(
+          // tap(console.log)
+          map( users => usuariosActions.cargarUsuariosSuccess({ usuarios: users }) ),
+          catchError( err => of(usuariosActions.cargarUsuariosError({payload: err })) )
+        )
+      )
+    )
+  )
+}
+/* Nota:
+
+si el callback del createEffect quedara:
+--------------------------------------------
+  cargarUsuarios$ = createEffect(
+    () => this.actions$
+  )
+--------------------------------------------
+esa accion se dispararia en todas las acciones que exitan / pasen por el store. Tengo que hacer que este pendiente de una accion en particular
+
+*/

src/app/store/reducers/index.ts

@@ -0,0 +1,2 @@
+export * from './usuarios.reducer'
+export * from './usuario.reducer'

src/app/store/reducers/usuario.reducer.ts

@@ -0,0 +1,51 @@
+import { createReducer, on } from '@ngrx/store';
+import { cargarUsuario, cargarUsuarioSuccess, cargarUsuarioError } from '../actions';
+import { Usuario } from "../../models/usuario.model";
+
+export interface UsuarioState {
+  id      : string | null,
+  user    : Usuario | null,
+  loaded  : boolean,
+  loading : boolean,
+  error   : any
+}
+
+export const usuarioInitialState: UsuarioState = {
+  id      : null,
+  user    : null,
+  loaded  : false,
+  loading : false,
+  error   : null
+};
+
+export const usuarioReducer = createReducer(
+
+  usuarioInitialState,
+
+  on(cargarUsuario, (state, { id }) => ({
+    ...state,
+    loading: true,
+    id
+  })
+  ),
+
+  on(cargarUsuarioSuccess, (state, { usuario } ) => ({
+    ...state,
+    loading: false,
+    loaded: true,
+    user: {...usuario}
+  })),
+
+  on(cargarUsuarioError, (state, { payload } ) => ({
+    ...state,
+    loading: false,
+    loaded: true,
+    error: {
+      url: payload.url,
+      name: payload.name,
+      message: payload.message
+    }
+  })),
+
+
+);

src/app/store/reducers/usuarios.reducer.ts

@@ -0,0 +1,44 @@
+import { createReducer, on } from '@ngrx/store';
+import { cargarUsuarios, cargarUsuariosSuccess, cargarUsuariosError } from '../actions';
+import { Usuario } from "../../models/usuario.model";
+
+export interface UsuariosState {
+  users   : Usuario[],
+  loaded  : boolean,
+  loading : boolean,
+  error   : any
+}
+
+export const usuariosInitialState: UsuariosState = {
+  users   : [],
+  loaded  : false,
+  loading : false,
+  error   : null
+};
+
+export const usuariosReducer = createReducer(
+
+  usuariosInitialState,
+
+  on(cargarUsuarios, (state) => ({...state, loading: true })),
+
+  on(cargarUsuariosSuccess, (state, { usuarios } ) => ({
+    ...state,
+    loading: false,
+    loaded: true,
+    users: [...usuarios]
+  })),
+
+  on(cargarUsuariosError, (state, { payload } ) => ({
+    ...state,
+    loading: false,
+    loaded: true,
+    error: {
+      url: payload.url,
+      name: payload.name,
+      message: payload.message
+    }
+  })),
+
+
+);

src/app/usuarios/lista/lista.component.html

@@ -1,4 +1,24 @@
-<div class="card-columns">
+<div class="alert alert-info text-center" role="alert"
+     *ngIf="loading">
+  <h4 class="alert-heading">Cargando ...</h4>
+  <p>
+    <i class="fa fa-spinner fa-2x"></i>
+  </p>
+  <hr>
+  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+</div>
+
+<div class="alert alert-danger text-center" role="alert"
+     *ngIf="error">
+  <h4 class="alert-heading">Error</h4>
+  <pre>
+    {{ error | json }}
+  </pre>
+  <p class="mb-0"></p>
+</div>
+
+
+<div class="card-columns" *ngIf="!loading">
 
   <div class="card" *ngFor="let user of usuarioList" >
     <img class="card-img-top" [src]="user.avatar" alt="Card image cap">