El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

NgRx Store es una biblioteca para la gestión de estado en aplicaciones Angular, basada en el patrón Redux. Proporciona una forma clara y predecible de gestionar el estado de la aplicación, facilitando la escalabilidad y el mantenimiento del código.

Objetivos de Aprendizaje

Al final de esta sección, deberías ser capaz de:

Comprender los conceptos básicos de NgRx Store.
Configurar NgRx Store en una aplicación Angular.
Crear acciones, reducers y efectos.
Seleccionar datos del estado de la aplicación.

Conceptos Clave

¿Qué es NgRx Store?

NgRx Store es una implementación de Redux para Angular. Redux es un patrón de gestión de estado que utiliza un único almacén (store) para toda la aplicación, lo que facilita la gestión del estado de manera predecible.

Beneficios de Usar NgRx Store

Predecibilidad: El estado de la aplicación es predecible y fácil de depurar.
Escalabilidad: Facilita la gestión del estado en aplicaciones grandes.
Desacoplamiento: Separa la lógica de negocio del componente, mejorando la mantenibilidad.

Componentes Principales de NgRx Store

Store: El almacén central que contiene el estado de la aplicación.
Actions: Eventos que describen algo que ha sucedido en la aplicación.
Reducers: Funciones puras que determinan cómo cambia el estado en respuesta a una acción.
Selectors: Funciones que seleccionan partes del estado del almacén.
Effects: Manejan efectos secundarios como llamadas a APIs.

Configuración de NgRx Store

Paso 1: Instalación

Primero, instala las dependencias necesarias:

npm install @ngrx/store @ngrx/effects @ngrx/store-devtools

Paso 2: Configuración del Store

Crea un archivo app.module.ts y configura el Store:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { AppComponent } from './app.component';
import { reducers, metaReducers } from './reducers';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot(reducers, { metaReducers }),
    EffectsModule.forRoot([]),
    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Paso 3: Definir el Estado y Reducers

Crea un archivo state.ts para definir el estado y los reducers:

import { Action, createReducer, on } from '@ngrx/store';
import * as fromActions from './actions';

export interface AppState {
  count: number;
}

export const initialState: AppState = {
  count: 0,
};

const _counterReducer = createReducer(
  initialState,
  on(fromActions.increment, (state) => ({ ...state, count: state.count + 1 })),
  on(fromActions.decrement, (state) => ({ ...state, count: state.count - 1 })),
  on(fromActions.reset, (state) => ({ ...state, count: 0 }))
);

export function counterReducer(state: AppState | undefined, action: Action) {
  return _counterReducer(state, action);
}

Paso 4: Definir Acciones

Crea un archivo actions.ts para definir las acciones:

import { createAction } from '@ngrx/store';

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

Paso 5: Seleccionar Datos del Estado

Crea un archivo selectors.ts para definir los selectores:

import { createSelector, createFeatureSelector } from '@ngrx/store';
import { AppState } from './state';

export const selectFeature = createFeatureSelector<AppState>('feature');

export const selectCount = createSelector(
  selectFeature,
  (state: AppState) => state.count
);

Paso 6: Usar el Store en Componentes

Inyecta el Store en un componente y usa las acciones y selectores:

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { AppState } from './state';
import * as fromActions from './actions';
import * as fromSelectors from './selectors';

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

  constructor(private store: Store<AppState>) {
    this.count$ = this.store.select(fromSelectors.selectCount);
  }

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

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

  reset() {
    this.store.dispatch(fromActions.reset());
  }
}

Ejercicio Práctico

Ejercicio 1: Contador con NgRx Store

Objetivo: Crear una aplicación de contador utilizando NgRx Store.
Pasos:
- Configura NgRx Store en tu aplicación.
- Define el estado inicial y los reducers.
- Crea acciones para incrementar, decrementar y resetear el contador.
- Define selectores para obtener el valor del contador.
- Usa el Store en un componente para despachar acciones y seleccionar el estado.

Solución

Sigue los pasos descritos anteriormente para configurar NgRx Store y crear la aplicación de contador.

Resumen

En esta sección, hemos aprendido los conceptos básicos de NgRx Store y cómo configurarlo en una aplicación Angular. Hemos cubierto cómo definir el estado, acciones, reducers y selectores, y cómo usar el Store en componentes. NgRx Store es una herramienta poderosa para la gestión de estado en aplicaciones Angular, proporcionando una forma clara y predecible de manejar el estado de la aplicación.

NgRx Store

Objetivos de Aprendizaje

Conceptos Clave

¿Qué es NgRx Store?

Beneficios de Usar NgRx Store

Componentes Principales de NgRx Store

Configuración de NgRx Store

Paso 1: Instalación

Paso 2: Configuración del Store

Paso 3: Definir el Estado y Reducers

Paso 4: Definir Acciones

Paso 5: Seleccionar Datos del Estado

Paso 6: Usar el Store en Componentes

Ejercicio Práctico

Ejercicio 1: Contador con NgRx Store

Solución

Resumen

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

Módulo 4: Servicios e Inyección de Dependencias

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas