En el mundo del desarrollo web moderno, la gestión eficiente de datos es esencial. Las aplicaciones actuales a menudo manejan grandes cantidades de información que debe ser almacenada, consultada y actualizada de manera dinámica. En este artículo, explicaremos cómo puedes aprovechar el poder de Dexie.js en tus proyectos Angular para guardar información localmente.

¿Qué es Dexie.js?

Es una biblioteca de gestión de estado que adopta un enfoque minimalista y directo para la programación reactiva. A diferencia de otras soluciones más complejas, Dexie.js se centra en la simplicidad y la facilidad de uso, lo que la convierte en una opción atractiva para desarrolladores que buscan una forma eficiente de manejar la información de sus aplicaciones.

• Simplicidad: Es intuitiva y fácil de aprender, lo que te permite comenzar a trabajar rápidamente sin una curva de aprendizaje pronunciada.
• Rendimiento: Está diseñada para ser eficiente y rápida, lo que garantiza que tus aplicaciones Angular funcionen sin problemas incluso con grandes cantidades de datos.
• Integración: Se integra perfectamente con Angular, lo que te permite aprovechar al máximo las capacidades de ambas herramientas.
• Flexibilidad: Te brinda la flexibilidad necesaria para gestionar el estado de tu aplicación de la manera que mejor se adapte a tus necesidades.

Cómo empezar con en Angular

1. Instalar la librería

npm install dexie --save

2. Creamos un archivo app-db.ts

import Dexie, { Table } from 'dexie';

export class AppDbHelper extends Dexie {

}

3. Creamos nuestro modelo/tabla, aca dejo un ejemplo:

export class LPAccount {
  id?: number;
  title!: string;
  current_value?: number;
  status!: number;
  type!: number;
  created_at?: string;
}

4. Sumamos nuestro modelo a la clase de la DB, tambien hay que configurar las claves primarias e índices dentro de la función de “stores”.

constructor() {
    super('lifepurse-db');

    this.version(1).stores({
      accounts: 'id'
    });
  }

5. Crear un servicio e inicializamos la clase de la DB:

import { Injectable, isDevMode } from '@angular/core';
import { AppDbHelper } from '../helpers/app-db.helper';

@Injectable({
  providedIn: 'root'
})
export class DatabaseService {

  database?: AppDbHelper;

  constructor() { }

  init() {
    this.database = new AppDbHelper();
  }
}

6. Ahora ya puedes crear elementos:

this.databaseService.database.accounts.add(new LPAccount());

7. Y para obtener los datos desde la base de datos:

import { liveQuery } from 'dexie';

liveQuery(() => this.databaseService.database.accounts.toArray())
.subscribe(data => this.items = data);

Dexie.js ofrece una forma sencilla y poderosa de gestionar el estado en aplicaciones Angular. Su enfoque minimalista, combinado con su rendimiento y facilidad de integración, la convierte en una herramienta valiosa para cualquier desarrollador que busque mejorar la eficiencia y la capacidad de respuesta de sus aplicaciones. ¡Prueba Dexie.js en tu próximo proyecto Angular y descubre cómo puede simplificar tu flujo de trabajo de desarrollo!