Synapsev5.0.6

State Manager

Creating Storages

Working with Data

Patterns

Recipes

Business Logic Layer

createSynapse

React

Utilities

Recipes

API

API Client

API Hooks (React)

Network / fetch

Working example on GitHubHookIndexedDBExample.tsx

useCreateStorage (indexedDB)

The same useCreateStorage with type: 'indexedDB'. Returns IAsyncStorage. Note: destroyOnUnmount defaults to false for IndexedDB (a persistent storage usually doesn't need to be wiped on unmount).

The same end-to-end todo domain (TodoState, initialTodoState — see MemoryStorage).

Usage

typescript
import { useCreateStorage, useStorageSubscribe } from 'synapse-storage/react'

function TodoApp() {
  const { storage, isReady } = useCreateStorage<TodoState>({
    type: 'indexedDB',
    name: 'todo-hook-idb',
    initialState: initialTodoState,
  })
  // storage has type IAsyncStorage<TodoState> | null

  // To destroy the store on unmount — pass the option explicitly:
  const result = useCreateStorage<TodoState>(
    { type: 'indexedDB', name: 'todo-hook-idb', initialState: initialTodoState },
    { destroyOnUnmount: true },
  )

  if (!isReady) return <div>Loading…</div>

  // useStorageSubscribe works identically for synchronous and asynchronous storages
  const todos = useStorageSubscribe(storage, (s) => s.todos)

  // set/update return a Promise, but await isn't required in handlers
  storage.update((s) => { s.filter = 'active' })
}

When to use

  • A component store needs persistence and/or large amounts of data.

When not to use

  • Small state without asynchrony → localStorage variant.

  • Ephemeral state → memory variant.

More on asynchronous operations — the "Working with data" section.