valburyakov / angular

Storeon for Angular 🅰⚡

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ng-storeon

Storeon logo by Anton Lovchikov

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');
  }
}

About

Storeon for Angular 🅰⚡

License:MIT License


Languages

Language:TypeScript 66.2%Language:JavaScript 26.0%Language:HTML 7.3%Language:CSS 0.5%