Introducción

NgRx se ha convertido en un estándar para la gestión avanzada de estado en aplicaciones Angular, ofreciendo un enfoque basado en Redux para manejar el estado de manera predecible y escalable. En este artículo, exploraremos cómo NgRx puede transformar tus aplicaciones Angular, aumentando su rendimiento y mejorando la experiencia del usuario.

El Problema de la Gestión de Estado

Manejar el estado en aplicaciones de frontend complejas puede ser un desafío significativo. Sin una estrategia clara, el manejo del estado puede llevar a inconsistencias y errores difíciles de depurar.

• Mantener el estado sincronizado entre componentes.
• Manejo de estados globales y locales.
• Facilitar el mantenimiento y escalabilidad del código.

Solución: NgRx

NgRx utiliza un modelo de flujo de datos unidireccional basado en acciones y un estado centralizado para resolver estos problemas. Ofrece:

• Store: Un contenedor centralizado para el estado de la aplicación.
• Actions: Eventos que describen cambios en el estado.
• Reducers: Pure functions responsables de actualizar el estado basado en acciones.
• Selectors: Permite la selección eficiente de partes del estado.

Ejemplo de Implementación

Aquí tienes un ejemplo básico de cómo implementar NgRx en tu aplicación Angular. Imaginemos un sistema de gestión de tareas (todo list).

// actions.ts
import { createAction, props } from '@ngrx/store';

export const addTask = createAction(
  '[Task] Add Task',
  props<{ task: string }>()
);

export const removeTask = createAction(
  '[Task] Remove Task',
  props<{ taskId: number }>()
);

// reducer.ts
import { createReducer, on } from '@ngrx/store';
import { addTask, removeTask } from './actions';

interface Task {
  id: number;
  name: string;
}

export const initialState: Task[] = [];

const _taskReducer = createReducer(
  initialState,
  on(addTask, (state, { task }) => [...state, { id: state.length + 1, name: task }]),
  on(removeTask, (state, { taskId }) => state.filter(task => task.id !== taskId))
);

export function taskReducer(state, action) {
  return _taskReducer(state, action);
}

// selectors.ts
import { createSelector } from '@ngrx/store';

export const selectTasks = (state) => state.tasks;
export const selectTaskCount = createSelector(
  selectTasks,
  (tasks) => tasks.length
);

Mejores Prácticas y Patrones Recomendados

1. Organiza tus estados y acciones de manera modular para mantener el código escalable.
2. Utiliza selectors para separar la lógica de selección del componente y facilitar la prueba.
3. Aplica efectos para manejar interacciones asíncronas.

Tests y Validación

La prueba de aplicaciones NgRx es soportada a través de herramientas como Jest y Cypress, que permiten testear de manera eficiente los reducers, actions y selectors.

import { taskReducer } from './reducer';
import { addTask } from './actions';

describe('Task Reducer', () => {
  it('should add a task', () => {
    const initialState = [];
    const newState = taskReducer(initialState, addTask({ task: 'Learn NgRx' }));
    expect(newState.length).toBe(1);
    expect(newState[0]).toEqual({ id: 1, name: 'Learn NgRx' });
  });
});