Awesome

Supports custom storage engine with async access

📦 Install

To install @ngxs-labs/async-storage-plugin run the following command:

npm install --save @ngxs-labs/async-storage-plugin
# or if you use yarn
yarn add @ngxs-labs/async-storage-plugin

🔨 Usage

Import the module into your root application module:

import { NgModule } from '@angular/core';
import { NgxsModule } from '@ngxs/store';
import { NgxsAsyncStoragePluginModule } from '@ngxs-labs/async-storage-plugin';

@NgModule({
    imports: [
        NgxsModule.forRoot(states),
        NgxsAsyncStoragePluginModule.forRoot(YOUR_CUSTOM_ENGINE)
    ]
})
export class AppModule {}

Custom Async Storage Engine

You can implement your own async storage engine by providing an engine that implements AsyncStorageEngine:

export class MyAsyncStorageEngine implements AsyncStorageEngine {
  constructor(private storage: YourStorage) { }

  length(): Observable<number> {
    // Your logic here
  }

  getItem(key: any): Observable<any> {
    // Your logic here
  }

  setItem(key: any, val: any): void {
    // Your logic here
  }

  removeItem(key: any): void {
    // Your logic here
  }

  clear(): void {
    // Your logic here
  }

  key(val: number): Observable<string> {
    // Your logic here
  }

}

@NgModule({
  imports: [
    NgxsModule.forRoot([]),
    NgxsAsyncStoragePluginModule.forRoot(MyAsyncStorageEngine)
  ]
})
export class AppModule {}

If your async storage returns a Promise you can wrap calls with from(storage.length()) from rxjs.

Code Samples

Custom Ionic Storage Engine

Here is an example implementation of the AsyncStorageEngine using the Ionic Storage. You can find the StorageService in the integration project.

import { Injectable, NgModule } from '@angular/core';
import { IonicStorageModule, Storage } from '@ionic/storage';
import { AsyncStorageEngine, NgxsAsyncStoragePluginModule } from '@ngxs-labs/async-storage-plugin';
import { NgxsModule } from '@ngxs/store';
import { from, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class StorageService implements AsyncStorageEngine {
  constructor(private storage: Storage) { }

  length(): Observable<number> {
    return from(this.storage.length());
  }

  getItem(key: any): Observable<any> {
    return from(this.storage.get(key));
  }

  setItem(key: any, val: any): void {
    this.storage.set(key, val);
  }

  removeItem(key: any): void {
    this.storage.remove(key);
  }

  clear(): void {
    this.storage.clear();
  }

  key(val: number): Observable<string> {
    return from(this.storage.keys().then(keys => keys[val]));
  }

}

@NgModule({
  imports: [
    NgxsModule.forRoot([]),
    NgxsAsyncStoragePluginModule.forRoot(StorageService),
    IonicStorageModule.forRoot()
  ]
})
export class AppModule {}

Options and Migrations

This plugin provides the same options and migration settings as the Storage Plugin. See Options and Migrations here.