0.1.1 • Published 8 months ago
re-event-flow v0.1.1
Re-event-flow state manager.
Light (2.63 kb gzip) state manager stream based inspired by effector.
Installation
NPM
npm add re-event-flow
Yarn
yarn add re-event-flow
How to use
Simple counter example with computed store
// --> Initialize event const increment = setEvent();
// --> Initialize store const counterStore = setStore(0) .on(increment, count => count + 1);
// --> Initialize computed store if needed const dividedByFiveStore = setComputedStore({ store: counterStore, condition: value => value % 5 === 0, }).watch(value => console.log('Divided by five with value:', value));
increment(1); // nothing happens... increment(1); // nothing happens... increment(1); // nothing happens... increment(1); // nothing happens... increment(1); // Prints "Divided by five with value: 5"
> Simple counter example with async effects
```typescript
// --> Promise for example
function asyncCount(countTo: number, delay: number, isReject: boolean): Promise<number> {
return new Promise((resolve, reject) => {
setTimeout(() => {
isReject ? reject({ message: 'Error!' }) : resolve(countTo);
}, delay);
});
}
// --> Initialize effect (underscore for private in this case)
const _asyncIncrement = setAsyncEvent(({ countTo, delay, isReject }: AsyncIncrementPayload) =>
asyncCount(countTo, delay, isReject)
);
// --> Initialize success handler (for fulfilled example)
function handleAsyncIncrementSuccess() {
_asyncIncrement({ delay: 1000, countTo: 1000, isReject: false });
}
// --> Initialize success handler (for rejected example)
function handleAsyncIncrementError() {
_asyncIncrement({ delay: 1000, countTo: 1000, isReject: true });
}
// --> Initialize store with counter
const counterStore = setStore(0)
.on(_asyncIncrement.fulfilled, (count, payload) => count + payload)
.watch(value => console.log('With success value:', value));
// --> Initialize loading store
const isLoadingStore = setStore(false)
.on(_asyncIncrement.pending, () => true)
.on(_asyncIncrement.fulfilled, () => false)
.on(_asyncIncrement.rejected, () => false)
.watch(value => console.log('isLoading:', value));
// --> Initialize error store
const errorStore = setStore('')
.on(_asyncIncrement.rejected, (_, payload) => payload.message)
.watch(value => console.log('With error message:', value));
// --> Success call example
handleAsyncIncrementSuccess(); // Prints "isLoading: true"
// ...after 1 second prints 'With success value: 1'
// Prints "isLoading: false"
// --> Error call example
handleAsyncIncrementError(); // Prints "isLoading: true"
// ...after 1 second prints 'With error message: Error!'
// Prints "isLoading: false"
Extended counter example with react click here.