IndexedDb for persist state?

[floinay]

Hi, please add support indexedDb for persist state, or please tell me the best way to implement it youself

[NetanelBasal]

You can provide a custom strategy.

import * as localForage from 'localforage';

localForage.config({
  driver: localForage.INDEXEDDB,
  name: 'Elf',
  version: 1.0,
  storeName: 'elf',
});

export const persist = persistState(authStore, {
  key: 'auth',
  storage: localForage,
});

[floinay]

Thanks

[JohanHeyvaert]

Unfortunately Elf's StateStorage interface doesn't entirely match localForage signature.
With Akita it just works out of the box, but with Elf it doesn't.

// Elf
export interface StateStorage {
    getItem<T extends Record<string, any>>(key: string): MaybeAsync<T | undefined>;
    setItem(key: string, value: Record<string, any>): MaybeAsync<boolean>;
    removeItem(key: string): MaybeAsync<boolean>;
}

// Akita
export interface PersistStateStorage {
    getItem(key: string): MaybeAsync;
    setItem(key: string, value: any): MaybeAsync;
    clear(): void;
}

// LocalForage
interface LocalForageDbMethodsCore {
    getItem<T>(key: string, callback?: (err: any, value: T | null) => void): Promise<T | null>;
    setItem<T>(key: string, value: T, callback?: (err: any, value: T) => void): Promise<T>;
    removeItem(key: string, callback?: (err: any) => void): Promise<void>;
    clear(callback?: (err: any) => void): Promise<void>;
    // ...
}

I think there are 3 incompatibilities:

• localForage.getItem() may return null (but Elf only allows T | undefined)
• localForage.setItem() returns the set value (but Elf expects a boolean)
• localForage.removeItem doesn't return anything (but Elf expects a boolean)

We can workaround it, but it feels a bit clumsy.

[NetanelBasal]

@JohanHeyvaert you're welcome to create a PR that adjusts it based on localForage.

[arochoab]

Hi.

I just begin using Elf with Angular 13 and I found the same problem: I can't use localForage because incompatible interfaces of getItem and setItem methods.

In Elf are:

getItem<T extends Record<string, any>>(key: string): Async<T | undefined>
setItem(key: string, value: Record<string, any>): Async<boolean>;

But in localForage are:

getItem<T>(key: string, callback?: (err: any, value: T | null) => void): Promise<T | null>;
setItem<T>(key: string, value: T, callback?: (err: any, value: T) => void): Promise<T>;

Johan Heyvaert mentioned before that "we can workaround it, but it feels a bit clumsy".

Can somebody, please, explain to me how can I workaround it? I have only two stores big enough for not using localStorage so maybe I don't care if it is clumsy.

I'm relative new to TypeScript so I really don't have any idea about that workaround.

Thanks in advance.

[NetanelBasal]

Are you using v1.1.3?

[arochoab]

Yes, I was using v1.1.3

[NetanelBasal]

@arochoab should work in v1.1.4

[arochoab]

Yes! It works in v1.1.4.

Thank you very much for your support!