@storeon/angular

Compatibility

How to use

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

// your component
import { 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']
})
export class AppComponent implements OnInit {
 changes: Observable<number>;
 constructor(private storeon: StoreonService<State, Events>) { }
 title = 'storeon-angular';
 ngOnInit() {
 this.changes = this.storeon.useStoreon('count');
 }
 updateState() {
 this.storeon.dispatch('inc');
 }
}

// example using Ivy hooks
import { 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'})
export class HookCounterComponent implements OnInit {
 count: Observable<number>;
 dispatch: StoreonDispatch<Events>;
 constructor() { }
 ngOnInit() {
 }
 increment() {
 this.dispatch('inc');
 }
}