stateapi
A state management for React. It is lightweight but powerful
Features
- Lightweight
- Simple API
- Support middleware
- Support computed props
- Support multiple state updating modes
- Support Sync and Async update
- Support Async Component
- Support immutablejs
Counter sample
import React from "react";import render from "react-dom";import create from "stateapi"; // create counter store with initial state and return its apisconst app get set = ; // define some actions, remmeber that action always returns new state.// returning undefined means nothing to change// increase counterconst increase = ;// decrease counterconst decrease = ; ;
Middleware
;const use set = ; // increase counterconst increase = ;// decrease counterconst decrease = ; ;
High Order Component
import create from "stateapi";const get hoc = ; // the component re-renders if state changedconst Counter = ;// using stateToProps() as first param// the component only re-renders if counter changedconst Coutner = ;// using hoc to get same effect as aboveconst CounterHoc = ;const Counter = ;
Get and Set state directly
;const get set = ;// get current stateconsole;// set new state;
Handle state change
;const on set = ;;// set new state;
State replace mode
;const set = ; // increase counterconst increase = ;
State merge mode (default)
;const set = ; // increase counterconst increase = ; // stateapi uses shallow comparer to detect new state change// in this case, nothing to change because counter value is the same of prev oneconst doNothing = ;
Async updating
;const set = ;const increase = ;; const loadTodosFrom = ; ;
Async Component
import create from "stateapi";const get = ; const TodoList = ; const AscynComponentWrapper = ;
Support immutable
const initialState = ;// indicate replace mode when creating storeconst set = ;const increase = ;const newState = ;not;;
Support computed props
Computed props will be re-computed once state changed
const get set computed = ;;const increase = ; console; // => false;console; // => true
There are 2 computed prop types: In-memory and In-State (default). In order to define In-Memory computed prop, just add prefix @. Use computed('InMemoryComputedPropNameWithoutAtSign') to get In-Memory computed prop value
const get set computed = ;;const increase = ; console; // => undefined;console; // => true
Computed prop can has many dependencies
const get computed = ;; console; // => { pageCount: 2, canPrev: false, canNext: true }
Connect multiple stores
const primaryStore = ;const secondaryStore = ; // connect secondaryStore to primaryStore// once primaryStore changed, counter value will be copied to secondaryStore and change notification will be triggeredsecondaryStore; console; // => 1