Foxstore

Reactive Event-Driven Store

Simply analog of NgRx, if you wanna Reactive State Management, but do not want to use big structures (like NgRx) in dependencies.

Install

Easy! Just install it from NPM

   npm install foxstore

Usage

Terminology

Action - function that may handle payload from some Event and returns another Event with some payload or not. Payload may be stream, so you should set async-param to True to handle it as stream.

Example:

   //As method
   
   @Action('loadDocs', {writeAs: 'documents'})
   loadDocs(): Event {
      return new Event('docsLoaded', this.docService.load(), true)
      }
      
   // As function for EventScheme
   
   const loadDocs = new MetaAction('loadDocs', () => new Event('docsLoaded', this.docService.load(), true));

Reducer - function that syncronously changing Store state.

Example:

   
   @Reducer('docsLoaded')
   separateDocs(docs: Doc[], state: State): State {
      return {
         ...state,
         activeDocs: docs.filter(isActive),
         inactiveDocs: docs.filter(not(isActive)),
         }
   }

Effect - just some side-effect, result of function wouldn`t be handled

Example:

   
   @Effect('docsLoaded')
   logDocs(docs: Doc[]): void {
      console.log(`Docs loaded - ${docs.length} items`);
   }

For classes

Use decorators for creating your own store!

Describe Actions, Reducers and Effects by selecting event-names.

// Model of Store to make easier to navigate
interface StoreModel {
   documents: Doc,
};

// @Store() - be careful!
// Store-decorator now not works if you have some DI in Angular-Service
// or use {provideId: 'root'}, you should just extend ProtoStore class and it will handle decorators
@Injectable()
export class MainStore extends ProtoStore<StoreModel> {

   constructor(
      private docService: DocumentService,
      private emailService: EmailService,
      ) { super(); }

   @Effect('storeLoaded')
   sendEmail(payload: any): void {
     this.emailService.send('Inited!');
   }

   @Action('loadDocs', {writeAs: 'documents'})
   loadTemplates(filter: IFilter): Event {
     const docs$ = this.docService.getDocuments();

     // Returnes event cause it is one event-flow
     return new Event(
      'documentTemplatesLoaded',
      docs$, // returnes stream as payload in Event
      true); // flag 'isAsync' for event with stream-data
   }
}  
   ...
      // Somewhere in component.ts
      this.docs$ = this.store.select('documents'); // Here IDE will offer to you list of entities which you set in generic
      this.store.dispatch('loadDocs');

Functions

You can use FoxStore without classes, but functions. It`s short, easy, readable. Can be useful with React or Vue, or another framework without angular-like service-classes

import { ProtoStore, createStore, EventScheme, schemeGen } from 'foxstore';

const initState = {
  rows: 10,
  columns: 10,
  data: null,
};


const eventSheme = schemeGen({ // Important not to set type! Actual for 2.*
  storeInited: {
    effects: [{eventName: 'storeInited', effect: console.log}]
  }
});

store = createStore<typeof initState, typeof eventSheme>(initState, null, null, eventSheme);

store.dispatch('storeInited');

Mix ways!

You can pass your EventScheme to ProtoStore constructor and have EventScheme and decorated methods Example:

   import { Action, Event, schemeGen, ProtoStore } from 'foxstore';
   
   interface InitState {
      docs: Doc[],
   }
   
   const initState: InitState = { docs: [], };
   
   const EventScheme = schemeGen({
      storeInited: { effects: [{eventName: 'storeInited', effect: console.log}],
      loadDocs: {}, // Pass EventScheme to generic to have autocompleting in .dispatch method
      // Events that decorated can be empty, just to be in keysof EventScheme
   });
   
   export class MeinStore extends ProtoStore<InitState, typeof EventScheme> {
      constructor(private docService: DocumentService) {
         super(initState, null, null, EventScheme);
      }
      
      @Action('loadDocs', {writeAs: 'documents'})
      loadDocs(): Event {
         return new Event('docsLoaded', this.docService.load(), true)
      }
   }

Flux-likely solution that contains simply types and methods to create Event-Driven Asynchronous Storage.

Was tested with Angular-applications.

Also, you can create Reactive Stateful Component by extending Store class. Then you will get component-store with own select(), patch() etc. It is useful if you have Component with a lot of dynamic data. Example you can see here https://github.com/angkira/foxstore-example

tags: foxstore rxjs redux flux storage state reactive react state-management ngrx rx