How to create async storage with NGXS

I was able to manage our own storage service that provides functionality to support async storage with the help of StorageMap library that use IndexedDb and AsyncStorageEngine.

Install StorageMap .
Install AsyncStorageEngine

Create a new storage service and implement AsyncStorageEngine with missing members like this:

export class StorageService implements AsyncStorageEngine {
constructor(private storageMap: StorageMap}

In your app.module.ts, configure your NgxsModule and other packages like this:

NgxsModule.forRoot(
  [
    // Add your state classes here
  ],
  {
    developmentMode: !environment.production,
    selectorOptions: {
      // https://www.ngxs.io/concepts/select#selector-options
      // These Selector Settings are recommended in preparation for NGXS v4
      suppressErrors: false,
      injectContainerState: false,
    },
  },
),
// https://github.com/ngxs-labs/async-storage-plugin
NgxsAsyncStoragePluginModule.forRoot(StorageService),
// https://github.com/ngxs-labs/async-storage-plugin
NgxsDataPluginModule.forRoot([NGXS_DATA_STORAGE_PLUGIN]),

In your state class, add the following decorators:

@Persistence({
useClass: StorageService,
})
@StateRepository()
@State<MyStateModel>({...

Et voilà! You can now use your async StorageService with NGXS!

Note: This will not work with IE11 and target type ES5 because ngxs-lab/data @Persistence decorator use the Package class that is only available with ES6 (ES2015). I was not able get this work event if I tried with the following packages:

https://github.com/GoogleChrome/proxy-polyfill

https://github.com/tvcutsem/harmony-reflect

Originally posted by @SteveLemire in https://github.com/ngxs-labs/data/issues/299#issuecomment-631042493

ngxs-labs / async-storage-plugin

How to create async storage with NGXS #156