linex-stores

Stores for the linex state-management library encapsulating commonly used logic.

Installation

npm i linex linex-stores

Usage

import { create } from 'linex'
import { count, toggle } from 'linex-stores'
 
const store = create({
  state: {
    counter: count(5),
    active: toggle(true)
  }
})
 
store.counter.value === 5
store.counter.increment()
store.counter.value === 6
store.active.value === true
store.active.toggle()
store.active.value === false

Stores

This package includes a few stores essential for everyday web development. There are different ways to import them:

import { set } from 'linex-stores'
const store = create({ state: { input: set(5) } })
 
import { set as setStore } from 'linex-stores'
const store = create({ state: { input: setStore(5) } })
 
import * as stores from 'linex-stores'
const store = create({ state: { input: stores.set(5) } })

Set

const store = set(initial: any)

Interface	Type	Description
store.value: any	State	Returns the current value.
store.set(value: any)	Update	Changes the value.

Toggle

const store = toggle([initial = false]: boolean)

Interface	Type	Description
store.value: boolean	State	Returns the state.
store.toggle([value]: boolean): boolean	Update	Toggles the value, or sets it to the one passed.

Count

const store = count([initial = 0]: number)

Interface	Type	Description
store.value: number	State	Returns the current count.
store.increment([value]: number): number	Update	Increments the count by value or by 1 if no value provided.
store.decrement([value]: number): number	Update	Decrements the count by value or by 1 if no value provided.

List

const store = list([initial]: any | initial: [] | ...args: any)

Interface	Type	Description
store.value: []	State	Returns the list as an array.
store.add(value: any): []	Update	Add a single element to the list.
store.add(value: []): []	Update	Adds an array of elements to the list.
store.add(...args: any): []	Update	Adds all the args to the list.
store.remove(value: any): []	Update	Removes all occurences of value from the list.
store.removeIndex(index: number): []	Update	Removes the element at index from the list.

Validate

This store is useful for any kind of form elements, where an invalid value has effects outside the form element itself. For example the submit element of a form being disabled as long some elements contain errors or warnings.

const store = validate(initial: T, valid: T => boolean, [warning]: T => boolean)

Interface	Type	Description
store.value: any	State	Returns the current value.
store.valid: boolean	State	Is the current value valid?
store.error: boolean	State	Is the current value invalid?
store.warning: boolean	State	Is the current value causing a warning?
store.set(value: any)	Update	Sets the current value and updates the validation states.

Sync

Used for values that are asynchronously stores elsewhere (Backend, Localstorage, AsyncStorage). Useful if value and sync-state should be displayed in different places.

const store = sync(initial: any, sync: any => Promise)

sync should be a function returning a Promise resolving as soon as the value has been synchronized.

Interface	Type	Description
store.value: any	State	Returns the current value.
store.synced: boolean	State	True if the value has been successfully synced.
store.error: boolean	State	Did an error happen during synchronization?
store.set(value: any)	Update	Changes the current value and starts synchronization.

Load (Suspense)

Asyncronously load a Component (or else) from anywhere and access it anywhere.

const store = load(importFunc: () => Promise)

const store = load(() => import('./src/Component.js'))

The import function will be called to load the component and should return a Promise eventually resolving with the Component.

Interface	Type	Description
store.Component: any	State	The Component once loaded.
store.loading: boolean	State	Is the Component currently being loaded?
store.loaded: boolean	State	Has the Component been loaded?
store.error: boolean	State	True if an error loading the Component has happened.
store.load(): void	Update	Triggers the store to load the Component.