ngx-state-manager
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 --saveCreate 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): anyget 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): voidset value to state using key -
getValue(key: string): anyget current value from state by value (not observable)
StateManagerEvents has following methods:
-
broadcast(value: StateEvent): voidbroadcast event to all listeners
License
The MIT License (MIT)