Patrón Redux en Angular

El patrón Redux es una arquitectura de gestión de estado que proporciona una forma predecible de manejar el estado en aplicaciones JavaScript. Aunque es más conocido por su uso con React, también se puede implementar eficazmente en aplicaciones Angular. A continuación, exploraremos cómo aplicar Redux en Angular.

¿Qué es Redux?

Redux es una biblioteca que permite gestionar el estado de una aplicación en un único lugar (store). Se basa en tres principios fundamentales:

1. Un único store: Todo el estado de la aplicación se almacena en un solo objeto.
2. El estado es solo de lectura: Para cambiar el estado, debes despachar acciones.
3. Las acciones son solo descripciones: Las acciones son objetos que describen lo que sucedió, no cómo cambió el estado.

Integración de Redux en Angular

Para implementar Redux en Angular, se utiliza la biblioteca @ngrx/store, que es una implementación de Redux para Angular. Aquí te mostramos los pasos básicos para configurarlo:

1. Instalar NgRx

Primero, necesitas instalar NgRx en tu proyecto Angular. Puedes hacerlo usando npm:

ng add @ngrx/store

2. Definir el Estado

// counter.state.ts
export interface CounterState {
    count: number;
}

export const initialCounterState: CounterState = {
    count: 0,
};

3. Crear Acciones

Las acciones son objetos que describen un cambio en el estado. Define tus acciones en un archivo:

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

export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');

4. Crear Reducers

Los reducers son funciones puras que reciben el estado actual y una acción, y devuelven un nuevo estado:

// counter.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { increment, decrement } from './counter.actions';
import { initialCounterState, CounterState } from './counter.state';

export const counterReducer = createReducer(
    initialCounterState,
    on(increment, (state) => ({ count: state.count + 1 })),
    on(decrement, (state) => ({ count: state.count - 1 }))
);

5. Configurar el Store en el Módulo

Importa el store en tu módulo principal:

// app.module.ts
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';

@NgModule({
    imports: [
        StoreModule.forRoot({ counter: counterReducer }),
    ],
})
export class AppModule {}

6. Usar el Store en Componentes

Puedes inyectar el store en tus componentes y seleccionar el estado o despachar acciones:

// counter.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { increment, decrement } from './counter.actions';
import { Observable } from 'rxjs';
import { CounterState } from './counter.state';

@Component({
    selector: 'app-counter',
    template: `
        <h1>Count: {{ count$ | async }}</h1>
        <button (click)="increment()">Increment</button>
        <button (click)="decrement()">Decrement</button>
    `,
})
export class CounterComponent {
    count$: Observable<number>;

    constructor(private store: Store<{ counter: CounterState }>) {
        this.count$ = store.select('counter', 'count');
    }

    increment() {
        this.store.dispatch(increment());
    }

    decrement() {
        this.store.dispatch(decrement());
    }
}

Conclusión

Integrar el patrón Redux en Angular a través de NgRx proporciona una forma poderosa de gestionar el estado de tu aplicación. Este enfoque no solo facilita el seguimiento del estado, sino que también mejora la mantenibilidad y escalabilidad del código. Al aplicar estos conceptos, estarás mejor equipado para manejar aplicaciones Angular más complejas y con un flujo de datos más predecible.