From 92bd8554b174318d5a899caa9cbeef4a77683ec8 Mon Sep 17 00:00:00 2001 From: Valentin Bossi Date: Fri, 11 Aug 2023 17:02:09 +0200 Subject: [PATCH 1/5] improve docs to point to memory leak if ngOnDestroy is overridden in own component store --- .../content/guide/component-store/lifecycle.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/projects/ngrx.io/content/guide/component-store/lifecycle.md b/projects/ngrx.io/content/guide/component-store/lifecycle.md index 37c09bd3ad..2149bf6f34 100644 --- a/projects/ngrx.io/content/guide/component-store/lifecycle.md +++ b/projects/ngrx.io/content/guide/component-store/lifecycle.md @@ -14,6 +14,18 @@ Currently, Angular provides initializer tokens in a few areas. The `APP_INITIALI +
+ +**Note:** If you override the `ngOnDestroy` method in your component store, you need to call `super.ngOnDestroy()`. Otherwise a memory leak may occur. +```ts + override ngOnDestroy(): void { + // 👇 add this line + super.ngOnDestroy(); + } +``` + +
+ ## OnStoreInit The `OnStoreInit` interface is used to implement the `ngrxOnStoreInit` method in the ComponentStore class. This lifecycle method is called immediately after the ComponentStore class is instantiated. From b25b3f23aae192001213ddf6ed9504db5c69a42c Mon Sep 17 00:00:00 2001 From: Valentin Date: Mon, 14 Aug 2023 06:36:39 +0000 Subject: [PATCH 2/5] Apply PR input --- .../guide/component-store/lifecycle.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/projects/ngrx.io/content/guide/component-store/lifecycle.md b/projects/ngrx.io/content/guide/component-store/lifecycle.md index 2149bf6f34..4f49d117e9 100644 --- a/projects/ngrx.io/content/guide/component-store/lifecycle.md +++ b/projects/ngrx.io/content/guide/component-store/lifecycle.md @@ -14,18 +14,6 @@ Currently, Angular provides initializer tokens in a few areas. The `APP_INITIALI -
- -**Note:** If you override the `ngOnDestroy` method in your component store, you need to call `super.ngOnDestroy()`. Otherwise a memory leak may occur. -```ts - override ngOnDestroy(): void { - // 👇 add this line - super.ngOnDestroy(); - } -``` - -
- ## OnStoreInit The `OnStoreInit` interface is used to implement the `ngrxOnStoreInit` method in the ComponentStore class. This lifecycle method is called immediately after the ComponentStore class is instantiated. @@ -150,6 +138,18 @@ ComponentStore also implements the `OnDestroy` interface from `@angulare/core` t It also exposes a `destroy$` property on the ComponentStore class that can be used instead of manually creating a `Subject` to unsubscribe from any observables created in the component. +
+ +**Note:** If you override the `ngOnDestroy` method in your component store, you need to call `super.ngOnDestroy()`. Otherwise a memory leak may occur. +```ts + override ngOnDestroy(): void { + // 👇 add this line + super.ngOnDestroy(); + } +``` + +
+ @Component({ // ... other metadata From 82eb6acd81bd4bcd7b97117963eb65431bb033c1 Mon Sep 17 00:00:00 2001 From: Valentin Date: Mon, 14 Aug 2023 13:31:34 +0000 Subject: [PATCH 3/5] move code snipped out of alert block --- projects/ngrx.io/content/guide/component-store/lifecycle.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/projects/ngrx.io/content/guide/component-store/lifecycle.md b/projects/ngrx.io/content/guide/component-store/lifecycle.md index 4f49d117e9..45cecb86e5 100644 --- a/projects/ngrx.io/content/guide/component-store/lifecycle.md +++ b/projects/ngrx.io/content/guide/component-store/lifecycle.md @@ -141,6 +141,9 @@ It also exposes a `destroy$` property on the ComponentStore class that can be us
**Note:** If you override the `ngOnDestroy` method in your component store, you need to call `super.ngOnDestroy()`. Otherwise a memory leak may occur. + +
+ ```ts override ngOnDestroy(): void { // 👇 add this line @@ -148,8 +151,6 @@ It also exposes a `destroy$` property on the ComponentStore class that can be us } ``` - - @Component({ // ... other metadata From 59cd6c29eb2166de67f4c0abfff668d6dfd3830f Mon Sep 17 00:00:00 2001 From: Valentin Date: Mon, 14 Aug 2023 18:23:43 +0000 Subject: [PATCH 4/5] use separate code snipped with full example --- .../content/guide/component-store/lifecycle.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/projects/ngrx.io/content/guide/component-store/lifecycle.md b/projects/ngrx.io/content/guide/component-store/lifecycle.md index 45cecb86e5..361e1c93dd 100644 --- a/projects/ngrx.io/content/guide/component-store/lifecycle.md +++ b/projects/ngrx.io/content/guide/component-store/lifecycle.md @@ -144,12 +144,20 @@ It also exposes a `destroy$` property on the ComponentStore class that can be us -```ts + +@Injectable() +export class MoviesStore extends ComponentStore<MoviesState> { + + constructor() { + super({movies: []}); + } + override ngOnDestroy(): void { // 👇 add this line super.ngOnDestroy(); } -``` +} + @Component({ From 67fbbc8587bf7a9b77b5f5d59a47d42407e5a555 Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Tue, 15 Aug 2023 14:36:46 +0200 Subject: [PATCH 5/5] Update projects/ngrx.io/content/guide/component-store/lifecycle.md --- projects/ngrx.io/content/guide/component-store/lifecycle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/ngrx.io/content/guide/component-store/lifecycle.md b/projects/ngrx.io/content/guide/component-store/lifecycle.md index 361e1c93dd..f673ef3d66 100644 --- a/projects/ngrx.io/content/guide/component-store/lifecycle.md +++ b/projects/ngrx.io/content/guide/component-store/lifecycle.md @@ -146,7 +146,7 @@ It also exposes a `destroy$` property on the ComponentStore class that can be us @Injectable() -export class MoviesStore extends ComponentStore<MoviesState> { +export class MoviesStore extends ComponentStore<MoviesState> implements OnDestroy { constructor() { super({movies: []});