@storeon/angular

A tiny event-based Redux-like state manager Storeon for Angular.

Online Demo | Demo with Angular Ivy

It is just 533 bytes (minified and gzipped) Angular module. It uses Size Limit to control size.

Read more about Storeon article.

---

Compatibility

@storeon/angular1.0.0+ requires storeon3.0.3+

@storeon/angular0.3.0+ requires storeon0.9.0+

@storeon/angular0.2.0+ supports Angular 8

@storeon/angular0.1.0 supports Angular 7

How to use

import{createStoreon,StoreonModule,StoreonEvents}from'storeon';import{storeonDevtools}from'storeon/devtools';import{environment}from'src/environments/environment';// State structureexportinterfaceState{count: number;}// Events declaration: map of event names to type of event dataexportinterfaceEventsextendsStoreonEvents<State>{// `inc` event which does not go with any data'inc': undefined;}// Initial state, reducers and business logic are packed in independent modulesconstcounterModule: StoreonModule<State,Events>=store=>{// Initial statestore.on('@init',()=>({count: 0}));// Eventsstore.on('inc',({ count })=>({count: count+1}));};exportconstdefaultStore=createStoreon<State,Events>([counterModule,!environment.production&&storeonDevtools]);// your NgModuleimport{STOREON}from'@storeon/angular';
@NgModule({providers: [{provide: STOREON,useValue: defaultStore// your store}],
...

// your componentimport{Component,OnInit}from'@angular/core';import{Observable}from'rxjs';import{StoreonService}from'@storeon/angular';import{State,Events}from'../app.module';
@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']})exportclassAppComponentimplementsOnInit{changes: Observable<number>;constructor(privatestoreon: StoreonService<State,Events>){}title='storeon-angular';ngOnInit(){this.changes=this.storeon.useStoreon('count');}updateState(){this.storeon.dispatch('inc');}}

// example using Ivy hooksimport{Component,OnInit}from'@angular/core';import{Observable}from'rxjs';import{UseStoreon}from'@storeon/angular';import{Events,State}from'../app.module';import{StoreonDispatch}from'storeon';
@Component({selector: 'app-hook-counter',templateUrl: './hook-counter.component.html',styleUrls: ['./hook-counter.component.scss']})
@UseStoreon<State,Events>({keys: ['count'],dispatcher: 'dispatch'})exportclassHookCounterComponentimplementsOnInit{count: Observable<number>;dispatch: StoreonDispatch<Events>;constructor(){}ngOnInit(){}increment(){this.dispatch('inc');}}