0.0.2 • Published 7 years ago
byunx v0.0.2
ByunX
state management + event emitter + reactive stream
Examples
Basic
const store = createStore({
data:{ a: 1, b: 2 },
computed:{
sum(){ return this.a + this.b; }
},
actions:{
update(a,b){ this.a = a; this.b = b; }
}
});
store.get('a');
// 1
store.get('sum');
// 3
store.on(event=>{
console.log("event trigger,", event.data);
});
store.dispatch("update", 3, 4);
// event trigger,
// {a:3, b:4, sum:7}
Stream
const store = createStore({
data:{ a: 1, b: 3 },
computed:{
sum(){ return this.a + this.b; }
},
actions:{
update(a,b){ this.a = a; this.b = b; }
}
});
store.stream()
.pluck("sum")
.take(3)
.subscribe(sum=>{
console.log(`sum : ${sum}`);
});
//sum: 3
store.dispatch("update", 3, 4);
//sum: 7
store.dispatch("update", 5, 6);
//sum: 11
store.dispatch("update", 1, 2);
store.dispatch("update", 3, 2);
store.dispatch("update", 6, 2);
//nothing...
API
Store
Stream
- buffer
- debounce
- delay
- distinct
- distinctUntilChanged
- filter
- flatMap
- last
- map
- merge
- pluck
- publish
- reduce
- scan
- skip
- subscribe
- take
- throttle
- zip
Store
get(key?: string, defaultValue = null)
store.get('a');
store.get('a.b'); // get nested property value
on(name: string, handler: function)
store.on("update:before", event=>{
console.log("update:before", event.data);
});
store.on("update", event=>{
console.log("updated", event);
});
store.dispatch("update", 3, 4);
// update:before {a:1, b:2, sum:3}
// updated {
// store: store,
// name: "update",
// args: [3,4],
// data:{a:3, b:4, sum:7}
// }
global events : *
, *:before
on(handler: function)
alias on("*", listener: function)
off(name: string, listener?: function)
off(listener: function)
clear registered event listeners
dispatch(name: string, ...args)
execute action.
dispatchQ(name: string, ...args)
add action to the queue.
store.on("update", event=>console.log("update: ", event.data));
store.on(event=>console.log("*: ", event.data));
store.dispatchQ("update", 1, 3);
store.dispatchQ("update", 2, 4);
console.log("end:", store.get());
// end: {a:1, b:2, sum:3}
// update: {a:1, b:3, sum:4}
// update: {a:2, b:4, sum:6}
// *: {a:2, b:4, sum:6}
stream()
return stream
Stream
buffer(size: number)
1--3---4------5---3----2------
buffer(3)
-------[1,3,4]---------[5,3,2]
store.stream()
.buffer(2)
.subscribe(v=>console.log(v));
store.dispatch("update", 2, 3);
//[ {a:1,b:2,sum:3}, {a:2,b:3,sum:5} ]
debounce(milliseconds: number = 100, immediate?: boolean)
-1-------2--3--4--5------6----
debounce(300)
----1-----------------5------6
delay(milliseconds: number)
-1-------2--3--4--5------6----
delay(300)
----1-------2--3--4--5------6-
distinct()
-1-------2--1--1--2------3-
distinct()
-1-------2---------------3-
distinctUntilChanged()
-1-------2--1--1--2------3--
distinctUntilChanged()
-1-------2--1-----2------3--
filter(handler: function)
-1-------2--1--1--2------3---
filter((v,i)=>i%2===0)
-1----------1-----2----------
flatMap(handler: function)
-1----2---3-------4-------
flatMap((v,i)=>[v,i])
-10---21--32------43------
last()
--1----2---3-------4|
last()
-------------------4|
map(handler: function)
-1----2---3-------4--
map(v=>v*2)
-2----4---6-------8--
merge(stream)
-1----2---3-------4--
---a--------b-c-----d
merge(stream)
-1-a--2---3-b-c---4-d
store1.stream()
.distinct()
.merge(store2.stream().take(5))
.subscribe(v=>console.log(v));
pluck(key: string)
store.stream()
.pluck('sum')
.subscribe(v=>console.log("sum:", v));
// sum: 4
store.update("update", 2, 3);
// sum: 5
publish()
const stream = store.stream()
.pluck('sum')
.subscribe(v=>console.log("sum:", v));
//sum: 4
stream.publish();
//sum: 4
stream.publish();
//sum: 4
publish to child stream
reduce()
-----1----2------3-------4|
reduce((prev,v)=>prev+v, 0)
-------------------------10|
scan(handler: function, initValue = null)
-----1----2------3-------4|
scan((prev,v)=>prev+v, 0)
-----1----3------6-------10|
skip(amount: number)
--1----2---3----4-----5--
skip(3)
----------------4-----5--
subscribe(handler: function, immediately?: boolean=true)
subscribe stream. If immediately option is false, it will be subscribed after dispatch or publish.
const stream = store.stream()
.subscribe(v=>console.log("sum:", v), false);
//nothing
stream.publish();
// sum 3
take(limit: number)
--1----2---3----4-----5--
take(3)
--1----2---3|
throttle(milliseconds: number = 100)
-1------2-3-4-5-6-----
throttle(300)
-1------2---4---6-----
zip(...streams)
---1--------2---3---------
----a-------------bc------
---xyz--------------------
zip(stream1, stream2)
---[1,a,x]------[2,b,y][3,c,z]-
store1.stream()
.zip(store2.stream(), store2.stream().take(5))
.subscribe(v=>console.log(v));
License
MIT