Immutable state management.
lodux 2.0.0
lodux version 2.0.0 is a rewrite of the store management. It incorporates immutable state management. store.state assignment can be done and can be done on multiple level.
Store(capital S)
It is the collection of all stores, the 'entire store'.
It has two methods, createStore()
, and subscribe()
.
store (lowercase s)
A store instance is the core of the immutable state management.
Two most important properites are state
, subscribe()
.
Plus six supplemental properties. dispatch()
, reduce()
, update()
, clone()
, use()
, and history
.
Principles:
- action and state are required to be JSON safe.
- store.state (and deep down level) assignment is immutable.
- null argument is considered illegitimate, error will be thrown.
- using
this
within callbacks will not be guaranteed. - methods, subscriptions, and callbacks are synchronously executed.
- store instances will not affect each other, except its cloned store.
Simple usage
storestate = type: 'add person' name: 'Sam' age :10;//{ type: 'add person', name: 'Sam', age :10} storestatestatus = 'boss';//{ status: 'boss', name: 'Sam', age :10} storestatereport = sales: 'Singapore';//{ report:{sales:'Singapore'}, status: 'boss', name: 'Sam', age :10} storestatereportsales = 'Singapore and Malaysia';//{ report:{sales:'Singapore and Malaysia'}, status: 'boss', name: 'Sam', age :10}
{Store}
createStore([name: non empty string]): store
name, if it is provided, it must be non empty string
const Store from "lodux";const store = Store;
subscribe(callback_fn): disposable
Subscribe to any changes of the entire store state
const disposable = Store;//unsubscribedisposable;
store instance
state
Immutable state of the store instance.
The store.state assignment must be a non-primitive type.
storestate = count : 0 patients:'James':name:'James' age:30; // state.count will always be 0 from now onconst state = storestate; let sub = store; // setting the current immutable state new statestorestate = ...storestate count: 1; storestatepatients = ...storestatepatients 'Peter':name:'Peter' age:28 sub = store; storestate = ...storestate count: 2; console; // still count=0 console; // count=2
history
The READONLY HISTORY of the store.
storestate = c: a: b: 'b' ; storestatecab = 'bb'; storehistory; // move history back one step and return that statestorehistory; // move the history to initial state and return that statestorehistory; // return the history state at index 0storehistorystate; // return the pointed history state (at index 0);storehistoryindex; // reutrn the pointed index (at index 0);
reduce(type: non empty string, callback_fn): disposable
const disposable = store;
dispatch(action [, disposable => {}])
disposable=>{} is the function that observes the reducer's return.
action.type must be non empty string.
store;
update(action)
Internally it invokes a full dispatch/reduce cycle.
The action is in fact the new state (i.e. internal reducer will return this new state). action.type is optional.;
Standard usage of update()
store;
subscribe(callback_fn): disposable
Subscribe to changes of this store state.
const disposable = store; // stop observingifdisposable disposable;disposable = undefined
store instance and its clone
A cloned store shares the same state to its store. A cloned store serves as a separate working space for middlewares and explicit dispatch().
; const store = Store; const middlewares1;// ... create the middlewares1 const cloned_store = store; // is ignored by the middlewares1store; // will be intercepted by the middlewares1cloned_store;
use(array of middlewares): store (cloned)
First, it clones the store, then applies the middleware to the cloned store
.
note: it applies only to the explicit dispatch (i.e. store.dispatch()), not to the internal implied dispatch (i.e. not to the store.update() nor store.state = {}).
middleware plugins
Redux's style middleware.
store => next => ( action [, subscription => {}] ) => {
return next(action[, subscription => {}]);
}.
//subscription => {} is optional.const log = { //.. do somthing like logging the action return ;};...const cloned_store = store;
clone()
const cloned_store = store;
Anomaly
Attention
- state management uses es6 functionalities (e.g. Proxy).
- special attention to the value -0 (literal negative zero). error will be thrown when passing -0 to the state.
Removed
React, Vue and Recompose modules are removed. To use those modules, use version 1.5.11.
installation
npm install --save lodux
load from script tag
<script src="where /dist/lodux.js is located"></script>
//if in conflictconst Store = lodux;
Versions
2.0.19 -
- fixed: assign undefined to sub level of store.state is allowed.
2.0.20 -
- fixed: array methods that manipulate store.state is disallowed.
2.0.21 -
- fixed: array methods 'splice' that manipulate store.state directly is disallowed.
- fixed: array assignment