Never Pay your Mortgage

    ngx-state-manager
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    ngx-state-manager

    npm version npm downloads

    Simple state manager based on Angular services.

    Table of contents:

    Prerequisites

    This package depends on Angular v13.0.0.

    Getting started

    Installation

    Install ngx-state-manager from npm:

    npm install ngx-state-manager --save

    Create state service

    Define your state IState and create TodosStateService extended from abstract class FeatureStateManager. The main thing provided by FeatureStateManager is state instance by wich we're gonna manipulate with state changes. You have to define initial state in super method:

    interface Todo {
      userId: number;
      id: number;
      title: string;
      completed: boolean;
    }
    
    interface IState {
      todos: Todo[];
      loaded: boolean;
    }
    
    @Injectable({
      providedIn: 'root',
    })
    export class TodosStateService extends FeatureStateManager<IState> {
      constructor(private http: HttpClient) {
        super({
          todos: [],
          loaded: false,
        });
      }
    
      getTodos(): Observable<Todo[]> {
        if (!this.state.getValue('loaded')) {
          this.http.get(GET_TODOS_URL).subscribe(todos => {
            this.state.set('todos', todos);
            this.state.set('loaded', true);
          });
        }
        return this.state.get('todos');
      }
    }

    app.module.ts

    Add TodosStateService to your app module using StateManagerModule:

    @NgModule({
      declarations: [AppComponent],
      imports: [BrowserModule, StateManagerModule.forRoot([TodosStateService])],
      bootstrap: [AppComponent],
    })
    export class AppModule {}

    state-manager.service.ts

    For your convenience create StateManager that gonna include all state services:

    @Injectable({ providedIn: 'root' })
    export class StateManagerService {
      constructor(
        public todos: TodosStateService,
        public auth: AuthStateService,
        public whatever: MyAnotherStateService
      ) {}
    }

    app.component.ts

    Now you can use StateManager in app component:

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
    })
    export class AppComponent {
      todos$: Observable<Todo[]> = this.stateManager.todos.getTodos();
    
      constructor(public stateManager: StateManager) {}
    }

    Events

    Besides simple state management library provide events broadcasting mechanism. This mechanism is achived using StateManagerEvents.

    For example, you need to clear todos after you've logged out. First of all you need define event:

    events.ts

    export class LogoutEvent implements StateEvent {
      readonly type = 'LogoutEvent';
    }

    Then inject StateManagerEvents and use broadcast method with created event as an arguemnt:

    auth-state.service.ts

    @Injectable({ providedIn: 'root' })
    export class AuthStateService extends FeatureStateManager<IState> {
      constructor(private events$: StateManagerEvents) {
        super();
      }
    
      logout(): void {
        this.state.set('user', null);
        localStorage.removeItem(loggedInKey);
        this.events$.broadcast(new LogoutEvent());
      }
    }

    To catch event use ListenEvent decorator with appropriate method

    todos-state.service.ts

    @Injectable({ providedIn: 'root' })
    export class TodosStateService extends FeatureStateManager<IState> {
      ...
    
      @ListenEvent(LogoutEvent)
      clear() {
        this.state.set('todos', []);
        this.state.set('loaded', false);
      }
    }

    Feature module

    You can isolate states and events within particular module using forFeature method of StateManagerModule:

    @NgModule({
      imports: [
        BrowserModule,
        StateManagerModule.forFeature([FeatureStateService]),
      ],
      providers: [FeatureStateService],
    })
    export class MyFeatureModule {}

    API

    FeatureStateManager has following methods:

    • getState(key: string): Observable<any> get observable of value from state by key
    • getStateValue(key: string): any get current value from state by value (not observable)

    State has following methods:

    • get(key: string): Observable<any> get observable of value from state by key
    • set(key: string, value: any): void set value to state using key
    • getValue(key: string): any get current value from state by value (not observable)

    StateManagerEvents has following methods:

    • broadcast(value: StateEvent): void broadcast event to all listeners

    License

    The MIT License (MIT)

    Keywords

    none

    Install

    npm i ngx-state-manager

    DownloadsWeekly Downloads

    2

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    102 kB

    Total Files

    31

    Last publish

    Collaborators

    • anton_barada