Image for post Optimización de Rendimiento en Angular con NgRx y Estrategias de Cambio

Optimización de Rendimiento en Angular con NgRx y Estrategias de Cambio

Escrito por Sergio Márquez

Introducción al Problema y Solución

En el desarrollo de aplicaciones empresariales con Angular, la eficiencia en la gestión de estado es crucial para ofrecer una experiencia de usuario fluida. NgRx proporciona un marco robusto para la gestión de estado basado en el patrón Redux, permitiendo un control más granular del estado de la aplicación.

Prerrequisitos y Configuración

  • Angular 14 o superior instalado
  • Conocimientos básicos sobre RxJS
  • NgRx instalado en tu proyecto: 
    ng add @ngrx/store

Explicación Paso a Paso con Código

1. Configuración de NgRx Store

  1. Define un estado inicial:
    2. export interface AppState { counter: number; } export const initialState: AppState = { counter: 0 };
  2. Crea acciones para manipular el estado:
    3. import { createAction } from '@ngrx/store'; export const increment = createAction('[Counter] Increment'); export const decrement = createAction('[Counter] Decrement');
  3. Implementa un reducer que reaccione a las acciones:
    4. import { createReducer, on } from '@ngrx/store'; const counterReducer = createReducer(initialState, on(increment, state => ({ ...state, counter: state.counter + 1 })), on(decrement, state => ({ ...state, counter: state.counter - 1 })));

2. Uso de la Estrategia de Detección de Cambios

Configura el componente para usar OnPush strategy, mejorando así el rendimiento al limitar la detección de cambios sólo cuando específicamente el input del componente cambia:

@Component({ selector: 'app-counter', changeDetection: ChangeDetectionStrategy.OnPush, template: `
{{ counter$ | async }}
` }) export class CounterComponent { counter$ = this.store.select('counter'); constructor(private store: Store) {} }

Mejores Prácticas y Patrones

  • Divide la lógica de tu componente en servicios para seguir el principio SRP.
  • Usa los selectores de NgRx para memoria cache en acceso al estado.
  • Implementa lazy loading para módulos con estado pesado.

Tests y Validación

Utiliza Jest para probar la lógica del estado y los efectos:

test('should increment the counter', () => { const state: AppState = { counter: 0 }; const newState = counterReducer(state, increment()); expect(newState.counter).toBe(1); });

Consideraciones de Rendimiento y Seguridad

La estrategia OnPush y las técnicas de optimización en NgRx pueden disminuir el uso de memoria y mejorar el tiempo de respuesta de la aplicación, proporcionando una experiencia más reactiva al usuario.

Conclusiones y Siguientes Pasos

La correcta implementación de NgRx junto con estrategias apropiadas de optimización puede transformar significativamente el rendimiento de aplicaciones de Angular. Para seguir avanzando, profundiza en los documentos oficiales de NgRx y explora patrones avanzados de arquitectura.

Volver al blog