effector-localstorage

Minimalistic (102 B) module for effector that sync stores with localStorage.

import {createStore, createEvent} from 'effector'
import connectLocalStorage from "effector-localstorage";

const increment = createEvent('increment')
const decrement = createEvent('decrement')
const resetCounter = createEvent('reset counter')

const counterLocalStorage = connectLocalStorage("counter")
  .onError((err) => console.log(err)) // setup error callback

const counter = createStore(counterLocalStorage.init(0)) // initialize store with localStorage value
  .on(increment, state => state + 1)
  .on(decrement, state => state - 1)
  .reset(resetCounter)

counter.watch(counterLocalStorage) // update localStorage on every store change

View example at codesandbox or repository.

Synchronize store between different tabs/windows

Local storage has one awesome feature — it can be synced between two (or more) widows/tabs. Window has storage event, which is only triggered when a window other than itself makes the changes.

This way it is possible to synchronise counter on two tabs of a browser. Or, closer to reality, abstract flag authenticated, when user performs logout on one tab — that triggers logout on all other opened tabs with the same application.

To make store synchronizable, just use effector-localstorage/sync instead of effector-localstorage. Also you will need to create event, which will set store value to new one (which came from another tab/window).

import {createStore, createEvent} from 'effector'
import connectLocalStorage from "effector-localstorage/sync";

const increment = createEvent('increment')
const decrement = createEvent('decrement')
const resetCounter = createEvent('reset counter')
const setCounter = createEvent('set counter') // event to set store value

const counterLocalStorage = connectLocalStorage("counter")
  .onError((err) => console.log(err)) // setup error callback
  .onChange(setCounter) // call event on external storage change

const counter = createStore(counterLocalStorage.init(0)) // initialize store with localStorage value
  .on(increment, state => state + 1)
  .on(decrement, state => state - 1)
  .on(setCounter, (state, value) => value) // set store value due to external tab/window change
  .reset(resetCounter)

counter.watch(counterLocalStorage) // update localStorage on every store change

Installation

Install it with yarn:

yarn add effector-localstorage

Or with npm:

npm i effector-localstorage --save

Sponsored

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Ilya Lesik 💻

Tomas Sandven 💻

Victor 💻

This project follows the all-contributors specification. Contributions of any kind welcome!