En este artículo, exploraremos cómo implementar un store en una aplicación Angular utilizando la librería NgRx. Aprenderemos cómo configurar y establecer datos en el store, así como cómo recuperarlos en diferentes componentes de la aplicación.
El uso de esta técnica proporciona un enfoque eficiente y escalable para la administración del estado en aplicaciones Angular.
En el desarrollo de aplicaciones web, la administración del estado es un aspecto crucial. A medida que las aplicaciones crecen en complejidad, mantener un estado coherente y bien organizado puede resultar desafiante. Aquí es donde un store centralizado, como el que proporciona la librería NgRx en Angular, puede ser una solución invaluable.
En este artículo, exploraremos cómo implementar un store en una aplicación Angular utilizando NgRx. Aprenderemos cómo configurar el store, establecer datos en él y recuperarlos en diferentes componentes de la aplicación. Siguiendo estos pasos, podrás mejorar la administración del estado en tu aplicación Angular y hacerla más escalable y fácil de mantener.
Configuración del store con NgRx
Para comenzar, necesitamos configurar el store utilizando NgRx. La primera tarea es instalar las dependencias necesarias. Asegúrate de tener instalado Angular CLI y, a continuación, ejecuta el siguiente comando:
ng add @ngrx/storeEsto instalará NgRx en tu proyecto Angular y configurará las dependencias necesarias en tu archivo package.json. Una vez que las dependencias estén instaladas, podemos seguir adelante y configurar nuestro store.
La configuración básica del store en NgRx implica definir un estado inicial, acciones y reducers. El estado inicial representa la forma inicial de nuestro store y se define utilizando una interfaz. Por ejemplo:
export interface AppState {
// Definir propiedades de estado
}Las acciones representan eventos que ocurren en la aplicación y desencadenan cambios en el estado del store. Por ejemplo, podemos tener una acción para agregar un nuevo elemento al store. Las acciones se definen utilizando la clase Action de NgRx.
Los reducers son responsables de manejar las acciones y actualizar el estado del store en consecuencia. Un reducer es una función pura que toma el estado actual y una acción, y devuelve un nuevo estado actualizado. Por ejemplo:
export function reducer(state: AppState, action: Action): AppState {
switch (action.type) {
// Manejar diferentes acciones y actualizar el estado
}
}Con el estado inicial, las acciones y los reducers configurados, podemos avanzar y establecer los datos en el store.
Estableciendo datos en el store
Para establecer datos en el store, necesitaremos utilizar las acciones y los reducers que hemos configurado previamente. Veamos cómo podemos hacerlo.
En primer lugar, necesitaremos definir nuestras acciones. Por ejemplo, si queremos agregar un nuevo elemento al store, podemos definir una acción «AddItem»:
import {
createAction,
props
} from '@ngrx/store';
export const addItem = createAction('[Store] Add Item', props < {
item: Item
} > ());Aquí hemos utilizado la función createAction de NgRx para definir la acción «AddItem». También hemos utilizado la función props para especificar las propiedades necesarias para la acción, en este caso, un objeto Item que representa el elemento que queremos agregar.
Una vez que hemos definido nuestras acciones, podemos utilizarlas en nuestros componentes para interactuar con el store. Supongamos que tenemos un formulario en un componente llamado «FormComponent» donde los usuarios pueden ingresar los datos del nuevo elemento a agregar. Podemos utilizar el servicio Store proporcionado por NgRx para despachar la acción «AddItem» cuando se envía el formulario:
import {
Store
} from '@ngrx/store';
import {
addItem
} from './store.actions';
export class FormComponent {
constructor(private store: Store) {}
onSubmit(item: Item) {
this.store.dispatch(addItem({
item
}));
}
}Aquí hemos inyectado el servicio Store en el componente y utilizado el método dispatch para despachar la acción «AddItem» con el objeto item como parámetro.
Una vez que la acción se ha despachado, se pasará al reducer correspondiente que hemos definido previamente. En el reducer, podemos manejar la acción y actualizar el estado del store según sea necesario. Por ejemplo:
export function reducer(state: AppState, action: Action): AppState {
switch (action.type) {
case '[Store] Add Item':
return {
...state, items: [...state.items, action.item]
};
default:
return state;
}
}Aquí hemos utilizado la acción «Add Item» para agregar el objeto item al array de elementos existentes en el estado del store.
Recuperando datos del store en componentes
Ahora que hemos establecido los datos en el store, podemos recuperarlos en diferentes componentes de nuestra aplicación Angular. NgRx proporciona una función llamada select que nos permite seleccionar porciones específicas del estado del store.
Supongamos que tenemos un componente llamado «ListComponent» donde queremos mostrar todos los elementos almacenados en el store. Podemos utilizar la función select para suscribirnos a los cambios en el estado y obtener los elementos actualizados:
import {
Store,
select
} from '@ngrx/store';
import {
Observable
} from 'rxjs';
import {
Item
} from './item.model';
export class ListComponent {
items$: Observable < Item[] > ;constructor(private store: Store) {
this.items$ = this.store.pipe(select(state => state.items));
}
}Aquí hemos utilizado la función select para seleccionar la propiedad items del estado del store. Luego, hemos asignado el resultado a la variable items$ como un Observable que podemos utilizar en nuestro template para mostrar los elementos.
En el template de «ListComponent», podemos suscribirnos al Observable items$ y mostrar los elementos en una lista:
<ul>
<li *ngFor="let item of items$ | async">{{ item.name }}</li>
</ul>
Aquí hemos utilizado la directiva *ngFor para iterar sobre los elementos en el array items$ y mostrar cada elemento en un elemento de lista . La directiva async nos permite suscribirnos automáticamente al Observable y recibir las actualizaciones en tiempo real.
De esta manera, cada vez que se agregue un nuevo elemento al store, el componente «ListComponent» se actualizará automáticamente y mostrará la lista actualizada de elementos.
Además de recuperar datos, también podemos utilizar la función select para realizar operaciones más avanzadas en el estado del store, como filtrar o transformar los datos antes de mostrarlos en los componentes.
En resumen, hemos explorado cómo implementar un store en una aplicación Angular utilizando la librería NgRx. Hemos aprendido cómo configurar el store con el estado inicial, acciones y reducers. Además, hemos visto cómo establecer datos en el store utilizando acciones y reducers, y cómo recuperar esos datos en diferentes componentes utilizando la función select.
El uso de un store centralizado como NgRx proporciona una forma eficiente y escalable de administrar el estado en aplicaciones Angular. Permite una mejor organización y gestión de los datos, mejora la reactividad de la aplicación y facilita el mantenimiento a medida que la aplicación crece en complejidad.
