spawn-x
Reactive management for javaScript applications
About
Spawn is a simple and super small library (8 kb) without dependencies for reactive management of app state which use modified observer pattern, where instead names of events, uses zones - paths to data into app state.
You can use Spawn independently with another libraryes. Also you may be interested:
- spawn-x-effects (Interceptor for cascade update)
- react-spawn-x (React connector for Spawn)
- angular-spawn-x (Angular connector for Spawn)
- angularjs-spawn-x (AngularJS connector for Spawn)
install
With npm:
npm install spawn-x --save
With yarn:
yarn add spawn-x
; const store = ;
With bower:
bower install spawn-x --save
var store = Spawn;
API:
Spawn exports 2 simple functions: createStore() and addInterceptor().
createStore()
This function needed for first initialize store.
// Signature:: instance
// Examplesconst store = ; // with initial stateconst initialState = hello: 'world';const store = ;
addInterceptor()
This function needed if you want to add interceptors (middlewares). For example interceptor may be as logger.
: Array<interceptors>
// Examplesconst myLoggerInterceptor = { console; ;}const myOtherInterceptor = ; const store = ; //or without initialStateconst store = ;
Store object after initialization will only have 4 methods: select(), detect(), reject(), update()
select()
Method return selected zone from app state. If zone will be equal '*', this method returns full app state. if zone will be a function, method puts the app state in the function argument and apply it.
// Signature:: any
// Examples:store;store; // full app statestore; // ES2015store; // ES5
detect()
Method makes subscribe for data zone change and apply callback if zone updated. If zone will be equal '*', this method makes subscribe for all changes. Returns instance object.
// Signature:: instance
// Examples:const callback = { const data = store;} store; store; //with receipt of actionstore;
reject()
Method for the removal of a callback (unsubscribe).
// Signature:: instance
// Examples:const callback = { const admins = store;} store;
update()
Method for updates zone. This method takes zone as first argument and action as second. Action must have 'data' field for your data and type. If zone will be equal '*', this method replaces app state on new state and apply all callbacks. It is may be useful to implementation something like time traveling. Returns instance object.
// Signature:interface IAction data: any; type: string; : instance
// Examples:const admins = id: 0 name: 'John Doe' id: 1 name: 'Alex Smith' id: 2 name: 'Kate Jensen' ;const myAction = data: admins type: 'UPDATE_ADMINS'store; //load app state from localStorageconst myAction = data: JSON type: 'LOAD_STATE'store;
Note:
You can subscribe on not fully matching zones, and Spawn will runs callbacks correctly. For example: if you subscribe on 'grandpa.parent.child' and will update 'grandpa' or 'grandpa.parent', then 'grandpa.parent.child' will launch own callback. in its turn, if you subscribe on 'grandpa' and will update 'grandpa.parent' or 'grandpa.parent.child', then 'grandpa' will launch own callback.
Example #1
; const store = ; { console;} //subscribe only on users.adminsstore; //update usersstore;//console output: 'name: John' ; //console output: 'name: Jess'
Example #2 "Simple todo app"
; { thisstore = store; thisstore; } { const tasks = thisstore ; thisstore; } { const filteredTasks = thisstore ; thisstore; } { const updatedTasks = thisstore ; thisstore; } { console; console; console;} { return todoslength;} { return todoslength;} { return { console; ; }} ///////////////////////////const initialState = today: tasks: ; const store = ; const app = store; app; app; app; app;app; /*console output: action: @@SPAWN/INIT -> ...All todos: 0Completed todos: 0-----All todos: 1Completed todos: 1action: ADD_TASK -> ...-----All todos: 2Completed todos: 2action: ADD_TASK -> ...-----All todos: 3Completed todos: 2action: ADD_TASK -> ...-----All todos: 3Completed todos: 3action: CHANGE_COMPLETE -> ...-----All todos: 2Completed todos: 2action: REMOVE_TASK -> ...*/
Example #3 "Redux-like style"
; const btn = document;const input = document;const list = document; const store = ; // Constantsconst ADD_TRACK = 'ADD_TRACK';const RENDER_TRACKS = 'RENDER_TRACKS';const UPDATE_STORE = 'UPDATE_STORE'; // fake Reducerstore; // Action Creatorsconst addTrack = { store;} const renderTracks = { listinnerHTML = ''; store ; store;} btn;
LICENSE
MIT © Alex Plex