Zustand with indexedDB

[wonkyum-kim]

Hello.

First of all, thank you for creating this awesome library.

I wanted to use indexedDB with Zustand.

So I looked into using persist and idb-keyval.

But I thought there were a few problems.

1. In persist, data is serialized and stored, but in indexedDB, I thought it was an unnecessary process.
2. I found idb-keyval to be inconvenient to use. I wanted to use indexedDB directly.

So, I wrote the code as below without using persist and idb-keyval.

I feel like it works well, but I don't think this code is perfect.

For example, I also had to use serialization when modifying existing data.

And I think other problems may arise that I didn't expect.

I'm curious if anyone has had the same problem as me and how they solved it!

// bearStore.ts

import { create } from 'zustand';

import {
  addDataToIndexedDB,
  editDataFromIndexedDB,
  getAllDataFromIndexedDB,
} from '@/app/lib/idb';

export type Bear = {
  id: string;
  name: string;
  weight: number;
};

type BearState = {
  bear: { [key: string]: Bear };
  addBear: (items: { [key: string]: Bear }) => void;
};

export const useBearStore = create<BearState>()((set) => ({
  bear: {},
  addBear: (items) => set((state) => ({ bear: { ...state.bear, ...items } })),
}));

const DB_NAME = 'bear-db';
const OBJECT_STORE_NAME = 'bear-store';
const VERSION = 1;

// Hydration
async function hydrate() {
  if (!globalThis.indexedDB) return;

  const indexedDBData = await getAllDataFromIndexedDB<Bear>(
    DB_NAME,
    OBJECT_STORE_NAME,
    VERSION
  );

  const zustandState = indexedDBData.reduce((acc, item) => {
    acc[item.id] = item;
    return acc;
  }, {} as { [key: string]: Bear });

  useBearStore.setState((state) => ({
    bear: { ...state.bear, ...zustandState },
  }));
}

hydrate();

// This callback function runs every time you store data.
useBearStore.subscribe(async (state, prevState) => {
  const stateKeys = Object.keys(state.bear);
  const prevStateKeys = Object.keys(prevState.bear);

  // Do not run for hydration.
  if (prevStateKeys.length === 0) return;

  // Find newly added or changed items.
  for (let i = 0; i < stateKeys.length; ++i) {
    const key = stateKeys[i];
    const value = state.bear[key];
    // New item
    if (!prevStateKeys.includes(key)) {
      await addDataToIndexedDB<Bear>(
        DB_NAME,
        OBJECT_STORE_NAME,
        VERSION,
        value
      );
      break;
    }
    // Changed item
    const prevValue = prevState.bear[key];
    if (JSON.stringify(value) !== JSON.stringify(prevValue)) {
      await editDataFromIndexedDB<Bear>(
        DB_NAME,
        OBJECT_STORE_NAME,
        VERSION,
        value
      );
      break;
    }
  }
});

// idb.ts

function openIndexedDB(
  dbName: string,
  objectStoreName: string,
  version: number
) {
  return new Promise<IDBDatabase>((resolve) => {
    const idb = window.indexedDB;
    const request = idb.open(dbName, version);

    request.onerror = () => {
      throw new Error();
    };

    request.onsuccess = () => {
      const db = request.result;
      resolve(db);
    };

    request.onupgradeneeded = () => {
      const db = request.result;
      if (!db.objectStoreNames.contains(objectStoreName)) {
        db.createObjectStore(objectStoreName, { keyPath: 'id' });
      }
    };
  });
}

export async function addDataToIndexedDB<T>(
  dbName: string,
  objectStoreName: string,
  version: number,
  data: T
): Promise<boolean> {
  const db = await openIndexedDB(dbName, objectStoreName, version);

  return new Promise((resolve, reject) => {
    const transaction = db.transaction(objectStoreName, 'readwrite');
    const objectStore = transaction.objectStore(objectStoreName);
    const request = objectStore.put(data);

    request.onsuccess = () => {
      resolve(true);
    };

    request.onerror = () => {
      reject(new Error('idb error'));
    };

    transaction.oncomplete = () => {
      db.close();
    };
  });
}

export async function editDataFromIndexedDB<T extends { id: string }>(
  dbName: string,
  objectStoreName: string,
  version: number,
  data: T
): Promise<boolean> {
  const db = await openIndexedDB(dbName, objectStoreName, version);

  return new Promise((resolve, reject) => {
    const transaction = db.transaction(objectStoreName, 'readwrite');
    const objectStore = transaction.objectStore(objectStoreName);

    const getRequest = objectStore.get(data.id);

    getRequest.onsuccess = () => {
      const oldData = getRequest.result as T;
      const newData = { ...oldData, ...data };
      const updateRequest = objectStore.put(newData);

      updateRequest.onsuccess = () => {
        resolve(true);
      };

      updateRequest.onerror = () => {
        reject(new Error('idb error'));
      };
    };

    getRequest.onerror = () => {
      reject(new Error('idb error'));
    };

    transaction.oncomplete = () => {
      db.close();
    };
  });
}

export async function getAllDataFromIndexedDB<T>(
  dbName: string,
  objectStoreName: string,
  version: number
): Promise<T[]> {
  const db = await openIndexedDB(dbName, objectStoreName, version);

  return new Promise((resolve, reject) => {
    const transaction = db.transaction(objectStoreName, 'readonly');
    const objectStore = transaction.objectStore(objectStoreName);

    const request = objectStore.getAll();

    request.onsuccess = () => {
      const data: T[] = request.result;
      resolve(data);
    };

    request.onerror = () => {
      reject(new Error('idb error'));
    };

    transaction.oncomplete = () => {
      db.close();
    };
  });
}

[dai-shi]

Links: #1721 #2084

[wonkyum-kim]

Thank you for answer.

I've read the articles written in that links before, but it didn't help me.

I think the structure of persist (e.g. getItem, setItem, removeItem) fits well with localStorage, but is different from indexedDB.

The structure of indexedDB consists of db, objectStore, and data(key-value).

I think persist can use idb-keyval because it creates and uses only one db and one objectStore. (But I'm not sure about this.)

But I wanted to use indexedDB directly without using idb-keyval.

In other words, I wanted to retrieve or modify values by directly specifying db and objectStore.

Also, storing values in localStorage requires converting them to strings, but indexedDB can store objects as well, so I thought serialization was unnecessary.

So I was wondering if anyone had experience using indexedDB with Zustand without using idb-keyval.

Thank you!

[dai-shi]

So I was wondering if anyone had experience

Sure, let's wait for some responses.

Also, storing values in localStorage requires converting them to strings

Converting to strings is the default, but customizable.

I think persist can use idb-keyval

I agree persist is designed to best fit with localStorage. So, one can probably develop a specific middleware for indexeddb, instead of using persist.