Tips for persisting the state with an async API

[robingenz]

Hi,
thank you for this great solution. I've been using it for a few weeks now and I'm excited.
I have a question which is related to the persistence of the state.
As far as I've seen, you can only persist state with something that implements the StorageEngine API.
I'm building a cross-platform web app (Android & iOS) with Capacitor and would like to persist the state with the storage plugin of the device, since the localStorage is often deleted by the OS and thus is not persistent (see here).
Unfortunately, this API is async.
Do you have any tips on how to do this best?

Thanks a lot!

[NetanelBasal]

Hi,

You can implement the StateStorage. It supports async storage.

[robingenz]

Thank you for the quick reply. I will test this and let you know if I have any problems.

[szarkowicz]

Hi @robingenz, @NetanelBasal

Did you ever get this working with Capactiorjs ? I am also using using the storage and having issues getting it working with Elf Persist.

I have tried to compare it to using the localStorageStrategy and seeing some strange bugs.

When I refresh the page my Capacitor StateStorage populates the localStorage in Chrome where as the same refresh does nothing with localStorageStrategy.

Then when I do add some data to the store some extra value property is getting added to the in the custom Capacitor Storage, and the localStorageStrategy works as expected.

Then if I refresh the page again, the enties and IDs of the capacitorjs local storage gets cleared and appended to the values property but the localStorageStrategy works as expected.

If I keep refreshing then the enties and IDs of the capacitorjs local storage gets cleared and appended over and over again.

// capacitorjs statStorage.ts
import { Storage } from '@capacitor/storage';

export const capacitorStateStorage = 
{
    getItem: (keyParm: any): Promise<any> => 
    {
        console.log('Get StateStorage', keyParm);
        return Storage.get({ key: keyParm });
    },    

    removeItem: async (keyParm: any) => 
    {
        console.log('removeItem', keyParm);
        await Storage.remove({ key: keyParm });

        return true;
    },

    setItem: async (key: any, value: Record<string, any>) => 
    {
        console.log('capacitorStateStorage : setItem', key);
        console.log('capacitorStateStorage : setItem', value); 

        await Storage.set({
                        key: key,
                        value: JSON.stringify(value),
                      });

        return true;
    }
};

// test.repository.ts
import {
  persistState,
  localStorageStrategy,
  StateStorage,
} from '@ngneat/elf-persist-state';

import { createStore } from '@ngneat/elf';
import {
  selectAllEntities,
  setEntities,
  withEntities,
  addEntities,
  getEntity
} from '@ngneat/elf-entities';

import { capacitorStateStorage } from './stateStorage';


interface Todo {
  id: number;
  label: string;
}

const testStore = createStore({ name: 'dekarounds' }, withEntities<Todo>());
const elfStore = createStore({ name: 'elfstore' }, withEntities<Todo>());


export const persist = persistState(elfStore, {
  key: 'local',
  storage: localStorageStrategy,
  preStoreInit: (value) => {
    console.log('preStoreInit : ', value);
    return value;
  },  
});

export const persistCap = persistState(testStore, {
  key: 'capacitor',
  storage: capacitorStateStorage,
  preStoreInit: (value) => {
    console.log('Capacitor preStoreInit : ', value);
    return value;
  },  
});


testStore.pipe(selectAllEntities()).subscribe((data) => {
  console.log('store data : ', data);
});

// testStore.update(
//   setEntities([
//     { id: 1, label: 'one ' },
//     { id: 2, label: 'two' },
//   ])
// );

It seems like Im probably doing something wrong with the custom stateStorage.ts implementation.

"@capacitor/core": "latest", - 3.5.1
"@ngneat/elf-persist-state": "^1.1.1",

Please let me know if I need to provide more info

Thanks in advance

[robingenz]

This discussion is quite old but I wanted to let you know that I got it working without any problems (see https://github.com/DHBW-VS/app/blob/main/src/app/store/capacitor-state-storage.ts).
@NetanelBasal Thank you so much for this great project.