linex-stores v1.0.1
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. |