https://github.com/alexfigliolia/galena-async-storage

An Galena middleware that persists your state using React Native's AsyncStorage
https://github.com/alexfigliolia/galena-async-storage

async-storage galena local-storage middleware react react-native

Last synced: about 2 months ago
JSON representation

An Galena middleware that persists your state using React Native's AsyncStorage

• Host: GitHub
• URL: https://github.com/alexfigliolia/galena-async-storage
• Owner: alexfigliolia
• Created: 2023-06-12T21:47:25.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-13T00:58:39.000Z (12 months ago)
• Last Synced: 2024-10-31T17:31:55.106Z (2 months ago)
• Topics: async-storage, galena, local-storage, middleware, react, react-native
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@figliolia/galena-async-storage
• Size: 76.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Async Storage Middleware

A [Galena](https://www.npmjs.com/package/@figliolia/galena) middleware for persisting units of State with [Async Storage](https://react-native-async-storage.github.io/async-storage/). 

# Getting Started

## Installation

```bash

npm install --save @figliolia/galena-async-storage

# or

yarn add @figliolia/galena-async-storage

```

## Basic Usage

```typescript

import { State } from "@figliolia/galena";

import { AsyncStorageMiddleware } from "@figliolia/galena-async-storage";

import AsyncStorage from "@react-native-async-storage/async-storage";

const UserState = new State("User", {

  token: "",

  username: ""

});

void AsyncStorage.getItem("User").then(savedState => {

  if(savedState) {

    // Initialize User State from async storage

    UserState.update(state => {

      state.token = savedState.token;

      state.username = savedState.username;

    });

  }

  // Persist all future state mutations using AsyncStorageMiddleware

  UserState.registerMiddleware(new AsyncStorageMiddleware());

});

```

### Persisting State Mutations

Once the `AsyncStorageMiddleware()` is registered on your state, each call to `State.update()`, `State.backgroundUpdate()`, and `State.priorityUpdate()` will persist the latest mutation into `AsyncStorage`. Each entry's key will be equal to `State.name`.

## Factories for Persisted Galena State

In production, you may find yourself with several units of State requiring `AsyncStorage`. If using `Galena` instances, applying this middleware to all unit's of `State` is as easy as calling:

```typescript

import { Galena } from "@figliolia/galena";

import { AsyncStorageMiddleware } from "@figliolia/galena-async-storage";

export const AppState = new Galena([

  new AsyncStorageMiddleware()

]);

const MyState = AppState.composeState("My State", {

  token: "",

  username: ""

});

// MyState.middleware = [new AsyncStorageMiddleware()];

```

However, if you're using Island Architecture and require several AsyncStorage-persisted units of State, a factory can be created for automatically applying the `AsyncStorageMiddleware`

```typescript

import { State, type Middleware } from "@figliolia/galena";

import { AsyncStorageMiddleware } from "@figliolia/galena-async-storage";

export const createPersistedState = (

  name: string, 

  initialState: T, 

  middleware: [new AsyncStorageMiddleware()]

) => {

  const state = new State(name, initialState);

  state.registerMiddleware(...middleware);

  return state;

}

```