@tethys/store
A mini, yet powerful state management library for Angular.
English | δΈζζζ‘£
Features
- Angular Styled, Store as a Service
- DDD, multi-store model, each store belongs to a domain, state storage and actions are together
- Easy to use API without excessive learning cost
Installation
npm install @tethys/store --save
# or if you are using yarn
yarn add @tethys/store
Simple Usage
import { Injectable } from '@angular/core'; import { Action, Store } from '@tethys/store'; import { of } from 'rxjs'; import { tap } from 'rxjs/operators'; interface CounterState { count: number; } @Injectable() export class CounterStore extends Store<CounterState> { static countSelector(state: CounterState) { return state.count; } constructor() { super({ count: 0 }); } @Action() increase() { return of(true).pipe( tap(() => { this.update({ count: this.snapshot.count + 1 }); }) ); } @Action() decrease() { return of(true).pipe( tap(() => { this.update((state) => { return { count: state.count - 1 }; }); }) ); } }
@Component({ selector: 'thy-store-counter-example', template: `<div>Count: {{ count$ | async }}</div> <button class="dg-btn dg-btn-primary dg-btn-sm" (click)="increase()">+</button> <button class="dg-btn dg-btn-primary dg-btn-sm" (click)="decrease()">-</button> `, styleUrls: ['./counter.component.scss'] }) export class ThyStoreCounterExampleComponent implements OnInit { count$: Observable<number> = this.counterStore.select$(CounterStore.countSelector); constructor(public counterStore: CounterStore) {} ngOnInit(): void {} increase() { this.counterStore.increase(); } decrease() { this.counterStore.decrease(); } }
Documentation
Development
$ git clone https://github.com/worktile/store
$ cd store && yarn
$ yarn start:docs // open http://localhost:8887