Quickstart
The ReactiveState class is automatically syncronized between all window and Web Worker contexts which share the same namespace. This means that updates pushed in 1 tab are automatically reflected in another. This is useful for keeping things like authentication states (or tokens) syncronzied between multiple tabs and Web Workers. Additionally, as ReactiveState is built on top of the browser's IndexDB, the state is persisted for as long as the IndexDB is available.
Unlike IndexDB, you can store any kind of variable as a value as long as it can be serialized. See the documentation for @nhtio/web-serialization for more information about supported types.
Getting started with @nhtio/web-reactive-state is quick and easy. Just follow the steps below and you'll be up and running in no time.
Installation
You can install @nhtio/web-reactive-state directly from your preferred package manager
npm i @nhtio/web-reactive-statepnpm add @nhtio/web-reactive-stateyarn add @nhtio/web-reactive-stateInitializing the Reactive State
Create an instance of the ReactiveState class with a namespace and a secret key which is at least 32 characters long:
import { ReactiveState } from '@nhtio/web-reactive-state'
const state = new ReactiveState('some-namespace', 'somesuperlongsecretkeywhichonlyiknow')From there, you have access to all of the methods of the ReactiveState class.
Reactivity
All "read" methods of the ReactiveState are automatically updated with the latest values, so when those methods are called you are receiving the latest value at the moment of the request. Additionally, ReactiveState exposes a subscribe method which allows you to receive updates in a way which is similar to listening for events on an Event Emitter. For more information, see the rxjs observables documentation.
Event Listeners
For a more specific event-driven methodology, you can use the following methods: