Product Promotion
0x5a.live
for different kinds of informations and explorations.
GitHub - worktile/store: 🚀 A mini, yet powerful state management library for Angular.
🚀 A mini, yet powerful state management library for Angular. - worktile/store
Visit SiteGitHub - worktile/store: 🚀 A mini, yet powerful state management library for Angular.
🚀 A mini, yet powerful state management library for Angular. - worktile/store
Powered by 0x5a.live 💗
@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
Release & Publish
yarn release
yarn pub
LICENSE
Angular Resources
are all listed below.
Learn how to build apps with modern reactive and declarative code
resource
~/modernangular.com
resource
Ultimate Angular™ - Learn Everything You Need To Master Angular
resource
~/ultimatecourses.com
resource
angular | Software Development » Web Development » Javascript | Gumroad
resource
~/gumroad.com
resource
GitHub - Jaspero/ng-slider: A light slider with no external dependencies
resource
~/github.com
resource
AG Grid: High-Performance React Grid, Angular Grid, JavaScript Grid
resource
~/www.ag-grid.com
resource
GitHub - fundsaccess/angular-iban: IBAN directives and pipes for Angular
resource
~/github.com
resource
GitHub - ngneat/reactive-forms: (Angular Reactive) Forms with Benefits 😉
resource
~/github.com
resource
GitHub - iamguid/ngx-mf: Bind your model types to angular FormGroup type
resource
~/github.com
resource
Made with ❤️
to provide different kinds of informations and resources.