Global Store

Demo

Demo-Code

to create multiple instances of a store, you can now use much easier Functional Store way.

A Module Store live in your Application

Define the Store as Service

Define your Service providedIn in root

my-component-store.service.ts

export interface MyState {
  counter: number;
}
@Injectable(
  // Define your Store in the global Scope
  { providedIn: 'root' },
)
export class MyStore implements OnDestroy {
  private store = this.storeFactory.createComponentStore<MyState>({
    storeName: 'BASIC_COUNTER',
    defaultState: { counter: 0 },
  });
  public counterState$ = this.store.state$;

  constructor(private storeFactory: StoreFactory) {}
}

Consume your Store in your Component

my-component.component.ts

import { Component, OnDestroy } from '@angular/core';
import { MyStore } from './my-store.service';

@Component()
export class CounterComponent implements OnDestroy {
  public counterState$ = this.myStore.counterState$;

  constructor(private myStore: MyStore) {}
}