valburyakov/angular

Storeon for Angular 🅰⚡

ng-storeon

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

Online Demo | Demo with Angular Ivy

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

Read more about Storeon article.

---

How to use

import createStore from 'storeon'

// Initial state, reducers and business logic are packed in independent modules
let increment = store => {
  // Initial state
  store.on('@init', () => ({ count: 0 }))
  // Reducers returns only changed part of the state
  store.on('inc', ({ count }) => ({ count: count + 1 }))
}

export const store = createStore([increment])

// your NgModule

import { NgStoreonModule } from 'ng-storeon';

@NgModule({
  imports: [NgStoreonModule], // NgStoreonModule
  ...
  providers: [{
    provide: 'STOREON',
    useValue: store  // your store
  }],
  ...

// your component

import { Component, OnInit } from '@angular/core';
import { NgStoreonService } from 'ng-storeon';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  changes: Subject<any>;
  dispatch: Function;
  constructor(private ngstoreon: NgStoreonService) { }
  title = 'sroreon-angular';

  ngOnInit() {
    const { dispatch, changes } = this.ngstoreon.useStoreon('count');
    this.dispatch = dispatch;
    this.changes = changes;
  }

  updateState() {
    this.dispatch('inc');
  }
}