Skip to content
/ store Public

πŸš€ A mini, yet powerful state management library for Angular.

License

Notifications You must be signed in to change notification settings

worktile/store

Folders and files

NameName
Last commit message
Last commit date

Latest commit

66e6ac0 Β· Oct 15, 2024
Aug 19, 2024
Aug 19, 2024
Jul 6, 2021
Jul 6, 2021
May 15, 2024
Oct 15, 2024
Jul 6, 2021
Nov 23, 2023
Jul 8, 2021
May 17, 2022
May 17, 2022
Jul 12, 2021
Oct 28, 2021
Jul 13, 2021
Aug 16, 2022
May 17, 2022
Oct 15, 2024
Jun 15, 2022
May 15, 2024
May 15, 2024
Feb 2, 2023
Dec 6, 2023
Oct 15, 2024
Mar 17, 2023
Aug 19, 2024

Repository files navigation

@tethys/store

GitHubActionCI Coverage Status npm (scoped) npm release docgeni code style: prettier

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

Release & Publish

yarn release
yarn pub

LICENSE

MIT License