Debug decorators and utilities for @ngrx/component-store
Open the console to see the logs:
Clone the repo, then ng serve demo
npm install ngx-ngrx-component-store-debug-tools
yarn add ngx-ngrx-component-store-debug-tools --dev
The demo app has three Card
component, each has its own Store instance.
This function subscribes to the store's state, and after every state change, it displays the current state of the store and the changes since the last state change.
const logLevel = 'debug';
export interface User {
name: string | null
}
export interface CardState {
user: User
}
@Injectable()
export class CardStore extends ComponentStore<CardState> {
storeId = LogState(this, { logLevel: 'debug' });
constructor() {
super({
user: {
name: null
}
});
}
readonly updateUser = this.updater((state: CardState, user: User): CardState => {
return {
...state,
user
};
});
}
When the component creates this store, it shows the initial state:
After we call store.updateUser({ user: 'Ben' })
, it shows the new state and the diff:
This decorator shows the parameter of an updater on the console:
@LogUpdater({ logLevel })
readonly updateUser = this.updater((state: CardState, user: User): CardState => {
return {
...state,
user
};
});
After we call store.updateUser({ user: 'Ben' })
, the decorator logs the updater call and its parameter on the console:
This decorator shows the trigger of an effect on the console.
protected fakeServiceFetchUser$(id: number): Observable<User> {
return of({
name: 'Frank'
}).pipe(delay(1000));
}
@LogEffect({ logLevel })
readonly fetchUserFromServer = this.effect((id$: Observable<number>) => {
return id$.pipe(
switchMap((id) => this.fakeServiceFetchUser$(id).pipe(
tapResponse(
(user) => this.updateUser(user),
(error: unknown) => console.error(error),
),
)),
);
});
After we call store.fetchUserFromServer(1)
, the decorator logs the effect call and its parameter on the console:
Since the effect calls the updater, the updater call and the state change are also visible.
If we use a separate store for every component instance and create multiple component instances, each of them has an unique id (0001
, 0002
, 0003
):
The following console log levels are supported, adjustable by the decorator's logLevel
parameter:
'log'
'info'
'debug'
'trace'
'off'
andundefined
: these turns off the logging