@effector-storage/react-native-async-storage

React Native AsyncStorage adapter

Adapter to persist store using React Native AsyncStorage.

Preconditions

@effector-storage/react-native-async-storage has dependency on @react-native-async-storage/async-storage, so it will auto install it.

But depending on your platform and React Native version, you might want to install AsyncStorage manually, because it might require linking.

So, install AsyncStorage, following documentation for your platform.

Install

Depending on your package manager

# using `pnpm` ↓
$ pnpm add effector-storage @effector-storage/react-native-async-storage

# using `yarn` ↓
$ yarn add effector-storage @effector-storage/react-native-async-storage

# using `npm` ↓
$ npm install --save effector-storage @effector-storage/react-native-async-storage

Usage

Import persist function from '@effector-storage/react-native-async-storage' module, and it will just work:

import { persist } from '@effector-storage/react-native-async-storage'

// persist store `$counter` with key 'counter'
persist({ store: $counter, key: 'counter' })

// if your storage has a name, you can omit `key` field
persist({ store: $counter })

⚠️ Note, that AsyncStorage is asynchronous, hence the name.

Two (or more) different stores, persisted with the same key, will be synchronized (synchronously!), even if not connected with each other directly — each store will receive updates from another one.

Formulae

import { persist } from '@effector-storage/react-native-async-storage'

• persist({ store, ...options }): Subscription
• persist({ source, target, ...options }): Subscription

Options

• ... all the common options from effector-storage's persist function.
• serialize? ((value: any) => string): Custom serialize function. Default = JSON.stringify.
• deserialize? ((value: string) => any): Custom deserialize function. Default = JSON.parse.

Adapter

import { adapter } from '@effector-storage/react-native-async-storage'

• adapter(options?): StorageAdapter

Options

• serialize? ((value: any) => string): Custom serialize function. Default = JSON.stringify.
• deserialize? ((value: string) => any): Custom deserialize function. Default = JSON.parse.

FAQ

How do I use custom serialization / deserialization?

Options serialize and deserialize are got you covered. But make sure, that serialization is stable, meaning, that deserialize(serialize(object)) is equal to object (or serialize(deserialize(serialize(object))) === serialize(object)):

import { persist } from '@effector-storage/react-native-async-storage'

const $date = createStore(new Date(), { name: 'date' })

persist({
  store: $date,
  serialize: (date) => String(date.getTime()),
  deserialize: (timestamp) => new Date(Number(timestamp)),
})