https://github.com/odonno/ngrx-watch-component-store

Simplify debugging of ngrx's ComponentStore
https://github.com/odonno/ngrx-watch-component-store

angular component-store decorator logging ngrx

Last synced: about 1 month ago
JSON representation

Simplify debugging of ngrx's ComponentStore

• Host: GitHub
• URL: https://github.com/odonno/ngrx-watch-component-store
• Owner: Odonno
• Created: 2022-11-10T13:17:16.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-05T17:34:24.000Z (over 3 years ago)
• Last Synced: 2025-06-19T10:11:31.859Z (12 months ago)
• Topics: angular, component-store, decorator, logging, ngrx
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/ngrx-watch-component-store
• Size: 1.17 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# NgrxWatchComponentStore

Simplify debugging of ngrx's ComponentStore

```

npm i ngrx-watch-component-store

```

### Introduction

The goal of this library is to display log on each ComponentStore state update. Here is what you can get in your Chrome DevTools:

![./images/logs.png](./images/logs.png)

### How to use?

Simply add `WatchComponentState` decorator on each `ComponentStore` in your app. See for yourself:

```ts

import { Injectable } from "@angular/core";

import { ComponentStore } from "@ngrx/component-store";

import { WatchComponentState } from "ngrx-watch-component-store";

@Injectable()

@WatchComponentState()

export class AppStore extends ComponentStore {

  constructor() {

    super(initialAppState);

  }

  // selectors

  readonly count$ = this.select((state) => state.count);

  // updaters

  readonly increment = this.updater((state) => ({ count: state.count + 1 }));

  readonly decrement = this.updater((state) => ({ count: state.count - 1 }));

  readonly reset = this.updater(() => initialAppState);

}

```