AnyStateJs
Fast, easy to use and flexible javascript state manager based on RxJs.
Installation
npm
npm install anystatejs
Usage
import { StateManager } from "anystatejs";
const state = new StateManager({ prop: 'initial value', sayHello: 'hello world' });
state.createAction('setHello', (state, name) => ({ sayHello: `hello ${name}` }));
state.subscribe(value => console.log(value));
state.call('setHello', 'John');
state.update({ prop: 'new value' });
// Output:
// { prop: 'initial value', sayHello: 'hello world' } --> output on subscribe
// { prop: 'initial value', sayHello: 'hello John' } --> output on setHello
// { prop: 'new value', sayHello: 'hello John' } --> output on update
Actions
Create actions for standard operations.
const state = new StateManager({ active: false, count: 0 });
state.createAction('Activate', () => ({ active: true }));
state.createAction('Add', ({ active, count }) => {
return active ? { count: count + 1 } : { count };
});
state.createAction('AddNumber', ({ active, count }, n) => {
return active ? { count: count + n } : { count };
});
state.subscribe(value => console.log(value));
state.call('Add');
state.call('Activate');
state.call('Add');
state.call('AddNumber', 10);
// Output:
// { active: false, count: 0 }
// { active: true, count: 0 }
// { active: true, count: 1 }
// { active: true, count: 11 }
Child state
AnyStateJs allows you to split your state in smaller chunks easier to handle.
The createChild
method returns a new StateManager
object totally ignorant of the parent.
const state = new StateManager({ child: { count: 0 } });
const child = state.createChild('child');
child.createAction('addCount', (state) => ({ count: state.count + 1 }));
state.subscribe(value => console.log(value));
child.call('addCount');
child.call('addCount');
state.removeChild('child');
// Output:
// { child: { count: 0 } }
// { child: { count: 1 } }
// { child: { count: 2 } }
Remember to remove the children you create after the usage in order to unsubscribe from all the children events.
state.removeChild('child');
Or
state.removeAllChildren();
Listen to single properties
Simplify your code by listening to single properties.
const state = new StateManager({ count1: 0, count2: 0 });
state.getPropertyObservable('count1').subscribe(value => console.log(value));
state.update({ count1: 1 });
state.update({ count2: 4 });
state.update({ count2: 5 });
state.update({ count1: 2 });
state.update({ count1: 3 });
// Output:
// 0
// 1
// 2
// 3