ngx-state-manager

ngx-state-manager

Simple state manager based on Angular services.

Table of contents:

• Prerequisites
• Getting started
  • Installation
  • Create state service
  • app.module.ts
  • state-manager.ts
  • app.component.ts
• Events
• Feature module
• License

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)