vnstore

vnstore

A lightweight library to manage state + listen to state changes globally

TODO

• split react stuff into it's own repo
• combine vnstore + vnlocal. store just has a persist option
• fix typings on the react stuff
  • also in general need to just solidify the API there

Getting Started

npm i -s vnstore

import {vnstore} from 'vnstore'

const $items = vnstore()

vncontext

import {vncontext, useContextHost, useProp} from 'vnstore'

const ctx = vncontext({count: 0})

const Parent = () => {
  const {host, setProp} = useContextHost(ctx)

  return host(
    <div>
      <Child />
    </div>
  )
}

const Child = () => {
  const setProp = useSetProp(ctx)
  const count = useProp(ctx, 'count')

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setProp('count', count + 1)} />
    </div>
  )
}

vnstore

Store Config

vnstore({
    fetcher: () => [], // a function which will return a list of items (either sync or as a promise) to fetch a list of items
    dependsOn: [], // a list of stores that when the selection changes will cause this store to be refreshed
    lazy: true, // call the fetcher one when items are needed
})

/** fetcher example */

const $items = vnstore({
    fetcher: () => fetchItemsAsync()
})
$items.refresh() // this will call fetchItemsAsync() and populate the store with it's response

/** lazy example */

const $items = vnstore({
    fetcher: () => fetchItemsAsync(),
    lazy: true
})
// fetchItemsAsync() not called yet
$items.list$(...)
// fetchItemsAsync() is called now


/** dependsOn example */

const $items = vnstore()

const $childrenItems = vnstore({
    fetcher: () => fetchChildrenAsync(),
    dependsOn: [$items]
})

$items.select('a')
// fetchChildrenAsync() is called

$items.select('b')
// fetchChildrenAsync() is called again

Data fetching

$items.loading() // false
$items.loading$(isLoading => ...)
$items.useLoading() // false

$items.refresh()
$items.loading() // true

Setters

$items.insert({id: 'a', prop1: 'abc', prop2: 'def'})
$items.insert([
  {id: 'a', prop1: 'abc', prop2: 'def'},
  {id: 'b', prop1: 'nice', prop2: 'one'}
])
$items.update('a', {prop1: 'ABC'})
$items.delete('a')
$items.select('a')
$items.size() // number

Getters

$items.list() // Item[]
$items.list(e => e.prop1 === 'qwerty') // Item[]
$items.map() // Map<string,Item>
$items.get('a') // Item | undefined
$items.selected() // Item | undefined

Listeners

$items.list$(items => /* Item[] */)
$items.list$(e => e.prop1 === 'qwerty', items => /* Item[] */)
$items.map$(e => /* Map<string,Item> */)
$items.get$('a', e => /* Item | undefined */)
$items.selected$(e => /* Item | undefined */)

React hooks

Hooks use listeners and will rerender component when items change

$items.useList() // Item[]
$items.useList(e => e.prop1 === 'qwerty') // Item[]
$items.useMap() // Map<string,Item>
$items.useGet('a') // Item | undefined
$items.useSelected() // Item | undefined

Other

$items.reset()
$items.list() // []