ivix
v0.1.0
Published
Javascript (TypeScript) state management library for ivi.
Downloads
4
Maintainers
Readme
ivix
Application state management library for ivi inspired by Redux.
ivi library provides a low level API that allows to build almost zero cost connect components, and ivix API is designed to get the most out of it, for example selector checking doesn't need any memory allocations when nothing is changed.
Current Status
Experimental.
Usage Example
import { createStore, selectData, connectComponent } from "ivix";
import { render, update, $h, Events } from "ivi";
const store = createStore(
{ counter: 0 },
function (prev, action) {
switch (action.type) {
case "INCREMENT":
return { ...prev, counter: prev.counter + 1 };
case "DECREMENT":
return { ...prev, counter: prev.counter - 1 };
}
return prev;
},
update,
);
function inc() { store.dispatch({ type: "INCREMENT" }); }
function dec() { store.dispatch({ type: "DECREMENT" }); }
function selectCounter(prev) {
const counter = store.getState().counter;
if (prev && prev.in === counter) {
return prev;
}
return selectData(counter);
}
function CounterDisplay(counter) {
return $h("div").children([
counter,
$h("button").events({ click: Events.onClick(() => { inc(); }) }).children("+1"),
$h("button").events({ click: Events.onClick(() => { dec(); }) }).children("-1"),
]);
}
const $CounterDisplay = connectComponent(selectCounter, CounterDisplay);
render($CounterDisplay(), document.getElementById("app"));
API
Create Store
function createStore<T, U>(
state: T,
reducer: (prev: T, action: U) => T,
onChange: () => void,
): Store<T, U>;
Connect
VNode factory constructors that connect selectors.
function connect<T, U, K>(
select: (prev: SelectData<K, U> | null, props: null | T, context: Context) => SelectData<K, U>,
render: (props: U, context: Context) => IVNode<any>,
): (props: null | T) => VNode<T>;
function connectComponent<T, U, K>(
select: (prev: SelectData<K, U> | null, props: null | T, context: Context) => SelectData<K, U>,
component: ComponentClass<U>,
): (props: null | T) => VNode<null | T>;
Selectors
Helper functions to write selectors.
By default, all selectors are memoized locally, with this helper functions it is possible to create selectors memoized
globally, or somewhere else, for example in Context
.
function selectData<T, U>(i: T, o?: U): SelectData<T, U>;
function memoizeSelector<T, U extends SelectData>(
select: (prev: U | null, props: T, context: Context) => U,
ref: (v?: U | null) => U | null,
): (prev: U | null, props: T, context: Context) => U;
function memoizeSelectorGlobally<T, U extends SelectData>(
select: (prev: U | null, props: T, context: Context) => U,
): (prev: U | null, props: T, context: Context) => U;
Mutable Collections
Mutable collections are tiny wrappers around primitive javascript collections with a method that creates a new instance with the same items.
They can be used as an efficient way to modify collections and update references, so it is easy to detect when something is changed.
class MutableArray<T> {
readonly items: T[];
constructor(items: T[] = []);
update(): MutableArray<T>;
}
class MutableSet<V> {
readonly items: Set<V>;
constructor(items: Set<V> = new Set<V>());
update(): MutableSet<V>;
}
class MutableMap<K, V> {
readonly items: Map<K, V>;
constructor(items: Map<K, V> = new Map<K, V>());
update(): MutableMap<K, V>;
}