Usare Dexie.js in React

IndexedDB è un database, low-level, per browser usabile tramite Javascript.

Dexie.js è un wrapper che è possibile usare anche in React.

In questo articolo vediamo un esempio di utilizzo.

Prima di tutto installiamo due pacchetti con npm:

npm install dexie dexie-react-hooks

Io sto usando Typescript, quindi creo il mio file db.ts così:

import Dexie, {EntityTable} from 'dexie';

interface Persona {
  id: number;
  nome: string;
}

const db = new Dexie('my_db') as Dexie & {
  persone: EntityTable<
      Persona,
      'id'
  >;
};

db.version(1).stores({
  persone: '++id, nome'
});

export type { Persona };
export { db };

Non è obbligatorio usare Typescript; sulla documentazione trovate anche esempi con Javascript.

Nel mio componente farò una cosa del genere:

import {useState} from "react";
import {db} from "./db.ts";
import {useLiveQuery} from "dexie-react-hooks";

function App() {
  const [nome, setNome] = useState('');
  const persone = useLiveQuery(() => db.persone.toArray());

  async function addPersona() {
    try {
      const id = await db.persone.add({nome});

      console.log(id);
      setNome('');
    } catch (e) {
      console.log(e);
    }
  }

  return (
      <>
        Name:
        <input
            type="text"
            value={nome}
            onChange={(ev) => setNome(ev.target.value)}
        />
        <button onClick={addPersona}>Aggiungi</button>
        <hr/>
        <div>
          {persone?.map((persona) => (
              <li key={persona.id}>
                {persona.nome}
              </li>
          ))}
        </div>
      </>
  );
}

export default App;

Enjoy!