Persistence

Reactant provides a plugin for persistence: reactant-storage.

API

• Storage
• IStorageOptions

Installation

npm

npm install reactant-storage

Yarn

yarn add reactant-storage

pnpm

pnpm add reactant-storage

Example

1. Set config in index.tsx:

import React from 'react';
import { render } from 'reactant-web';
import { createApp } from 'reactant';
import {
  StorageOptions,
  localStorage,
  IStorageOptions,
} from 'reactant-storage';
import { HomeView } from './views';

const app = createApp({
  modules: [
    {
      provide: StorageOptions,
      useValue: {
        whitelist: [],
        storage: localStorage,
        loading: <div>loading</div>,
      } as IStorageOptions,
    },
  ],
  main: HomeView,
  render,
});

app.bootstrap(document.getElementById('app'));

2. Module shoppingCart.ts:

import { injectable, action, state } from 'reactant';
import { Storage } from 'reactant-storage';

@injectable({
  name: 'shoppingCart',
})
class ShoppingCart {
  constructor(public storage: Storage) {
    this.storage.setStorage(this, {
      whitelist: ['list'],
    });
  }

  @state
  list = [];
}

export { ShoppingCart };

See full example.