Skip to content

Commit 0f7015d

Browse files
authored
57d0c523 docs(component-store): add alert about NgRx Signals (#4629)
1 parent 222f42e commit 0f7015d

23 files changed

+75
-75
lines changed

commit_message

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
6a717f33 chore: release 19.0.0
1+
57d0c523 docs(component-store): add alert about NgRx Signals (#4629)

generated/docs/app/search-data.json

+1-1
Large diffs are not rendered by default.

generated/docs/docs.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"id": "docs",
33
"title": "What is NgRx?",
4-
"contents": "\n\n\n <div class=\"github-links\">\n <a href=\"https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/marketing/docs.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n </div>\n\n\n<div class=\"content\">\n<h1 class=\"no-toc\" id=\"what-is-ngrx\">What is NgRx?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"docs#what-is-ngrx\"><i class=\"material-icons\">link</i></a></h1>\n<p>NgRx is a framework for building reactive applications in Angular. NgRx provides libraries for:</p>\n<ul>\n<li>Managing global and local state.</li>\n<li>Isolation of side effects to promote a cleaner component architecture.</li>\n<li>Entity collection management.</li>\n<li>Integration with the Angular Router.</li>\n<li>Developer tooling that enhances developer experience when building many different types of applications.</li>\n</ul>\n<h2 id=\"packages\">Packages<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"docs#packages\"><i class=\"material-icons\">link</i></a></h2>\n<p>NgRx packages are divided into a few main categories</p>\n<h3 id=\"state\">State<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"docs#state\"><i class=\"material-icons\">link</i></a></h3>\n<ul>\n<li><a href=\"guide/store\">Store</a> - RxJS powered global state management for Angular apps, inspired by Redux.</li>\n<li><a href=\"guide/effects\">Effects</a> - Side effect model for @ngrx/store.</li>\n<li><a href=\"guide/router-store\">Router Store</a> - Bindings to connect the Angular Router to @ngrx/store.</li>\n<li><a href=\"guide/entity\">Entity</a> - Entity State adapter for managing record collections.</li>\n<li><a href=\"guide/component-store\">ComponentStore</a> - Standalone library for managing local/component state.</li>\n<li><a href=\"guide/signals\">Signals</a> - Reactive store and set of utilities for Angular Signals.</li>\n<li><a href=\"guide/operators\">Operators</a> - Shared RxJS operators for NgRx libraries.</li>\n</ul>\n<h3 id=\"data\">Data<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"docs#data\"><i class=\"material-icons\">link</i></a></h3>\n<ul>\n<li><a href=\"guide/data\">Data</a> - Extension for simplified entity data management.</li>\n</ul>\n<h3 id=\"view\">View<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"docs#view\"><i class=\"material-icons\">link</i></a></h3>\n<ul>\n<li><a href=\"guide/component\">Component</a> - Extension for building reactive Angular templates.</li>\n</ul>\n<h3 id=\"developer-tools\">Developer Tools<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"docs#developer-tools\"><i class=\"material-icons\">link</i></a></h3>\n<ul>\n<li><a href=\"guide/store-devtools\">Store Devtools</a> - Instrumentation for @ngrx/store that enables visual tracking of state and time-travel debugging.</li>\n<li><a href=\"guide/schematics\">Schematics</a> - Scaffolding library for Angular applications using NgRx libraries.</li>\n<li><a href=\"guide/eslint-plugin\">ESLint Plugin</a> - ESLint rules to warn against bad practices. It also contains a few automatic fixes to enforce a consistent style, and to promote best practice.</li>\n</ul>\n\n</div>\n\n<!-- links to this doc:\n - guide/entity\n-->\n<!-- links from this doc:\n - docs#data\n - docs#developer-tools\n - docs#packages\n - docs#state\n - docs#view\n - docs#what-is-ngrx\n - guide/component\n - guide/component-store\n - guide/data\n - guide/effects\n - guide/entity\n - guide/eslint-plugin\n - guide/operators\n - guide/router-store\n - guide/schematics\n - guide/signals\n - guide/store\n - guide/store-devtools\n - https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/marketing/docs.md?message=docs%3A%20describe%20your%20change...\n-->"
4+
"contents": "\n\n\n <div class=\"github-links\">\n <a href=\"https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/marketing/docs.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n </div>\n\n\n<div class=\"content\">\n<h1 class=\"no-toc\" id=\"what-is-ngrx\">What is NgRx?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"docs#what-is-ngrx\"><i class=\"material-icons\">link</i></a></h1>\n<p>NgRx is a framework for building reactive applications in Angular. NgRx provides libraries for:</p>\n<ul>\n<li>Managing global and local state.</li>\n<li>Isolation of side effects to promote a cleaner component architecture.</li>\n<li>Entity collection management.</li>\n<li>Integration with the Angular Router.</li>\n<li>Developer tooling that enhances developer experience when building many different types of applications.</li>\n</ul>\n<h2 id=\"packages\">Packages<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"docs#packages\"><i class=\"material-icons\">link</i></a></h2>\n<p>NgRx packages are divided into a few main categories</p>\n<h3 id=\"state\">State<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"docs#state\"><i class=\"material-icons\">link</i></a></h3>\n<ul>\n<li><a href=\"guide/store\">Store</a> - RxJS powered global state management for Angular apps, inspired by Redux.</li>\n<li><a href=\"guide/effects\">Effects</a> - Side effect model for @ngrx/store.</li>\n<li><a href=\"guide/router-store\">Router Store</a> - Bindings to connect the Angular Router to @ngrx/store.</li>\n<li><a href=\"guide/entity\">Entity</a> - Entity State adapter for managing record collections.</li>\n<li><a href=\"guide/signals\">Signals</a> - Reactive store and set of utilities for Angular Signals.</li>\n<li><a href=\"guide/component-store\">ComponentStore</a> - Standalone library for managing local/component state.</li>\n<li><a href=\"guide/operators\">Operators</a> - Shared RxJS operators for NgRx libraries.</li>\n</ul>\n<h3 id=\"data\">Data<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"docs#data\"><i class=\"material-icons\">link</i></a></h3>\n<ul>\n<li><a href=\"guide/data\">Data</a> - Extension for simplified entity data management.</li>\n</ul>\n<h3 id=\"view\">View<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"docs#view\"><i class=\"material-icons\">link</i></a></h3>\n<ul>\n<li><a href=\"guide/component\">Component</a> - Extension for building reactive Angular templates.</li>\n</ul>\n<h3 id=\"developer-tools\">Developer Tools<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"docs#developer-tools\"><i class=\"material-icons\">link</i></a></h3>\n<ul>\n<li><a href=\"guide/store-devtools\">Store Devtools</a> - Instrumentation for @ngrx/store that enables visual tracking of state and time-travel debugging.</li>\n<li><a href=\"guide/schematics\">Schematics</a> - Scaffolding library for Angular applications using NgRx libraries.</li>\n<li><a href=\"guide/eslint-plugin\">ESLint Plugin</a> - ESLint rules to warn against bad practices. It also contains a few automatic fixes to enforce a consistent style, and to promote best practice.</li>\n</ul>\n\n</div>\n\n<!-- links to this doc:\n - guide/entity\n-->\n<!-- links from this doc:\n - docs#data\n - docs#developer-tools\n - docs#packages\n - docs#state\n - docs#view\n - docs#what-is-ngrx\n - guide/component\n - guide/component-store\n - guide/data\n - guide/effects\n - guide/entity\n - guide/eslint-plugin\n - guide/operators\n - guide/router-store\n - guide/schematics\n - guide/signals\n - guide/store\n - guide/store-devtools\n - https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/marketing/docs.md?message=docs%3A%20describe%20your%20change...\n-->"
55
}
+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"id": "guide/component-store",
33
"title": "@ngrx/component-store",
4-
"contents": "\n\n\n <div class=\"github-links\">\n <a href=\"https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/guide/component-store/index.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n </div>\n\n\n<div class=\"content\">\n<h1 id=\"ngrxcomponent-store\">@ngrx/component-store<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#ngrxcomponent-store\"><i class=\"material-icons\">link</i></a></h1>\n<p>ComponentStore is a stand-alone library that helps to manage local/component state. It's an alternative to reactive push-based \"Service with a Subject\" approach.</p>\n<h2 id=\"key-concepts\">Key Concepts<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#key-concepts\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li>Local state has to be initialized, but it can be done lazily.</li>\n<li>Local state is typically tied to the life-cycle of a particular component and is cleaned up when that component is destroyed.</li>\n<li>Users of ComponentStore can update the state through <code>setState</code> or <code>updater</code>, either imperatively or by providing an Observable.</li>\n<li>Users of ComponentStore can read the state through <code><a href=\"api/store/select\" class=\"code-anchor\">select</a></code> or a top-level <code><a href=\"api/component-store/ComponentStore#state$\" class=\"code-anchor\">state$</a></code>. Selectors are very performant.</li>\n<li>Users of ComponentStore may start side-effects with <code><a href=\"api/effects/EffectNotification#effect\" class=\"code-anchor\">effect</a></code>, both sync and async, and feed the data both imperatively or reactively.</li>\n</ul>\n<p>The details about <a href=\"guide/component-store/initialization\">initialization</a>, <a href=\"guide/component-store/write\">writing</a> and <a href=\"guide/component-store/read\">reading</a> from state,\nand <a href=\"guide/component-store/effect\">side-effects</a> management can be found in the corresponding sections of the Architecture.</p>\n<h2 id=\"installation\">Installation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#installation\"><i class=\"material-icons\">link</i></a></h2>\n<p>Detailed installation instructions can be found on the <a href=\"guide/component-store/install\">Installation</a> page.</p>\n<h2 id=\"ngrxstore-or-ngrxcomponent-store\">@ngrx/store or @ngrx/component-store?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#ngrxstore-or-ngrxcomponent-store\"><i class=\"material-icons\">link</i></a></h2>\n<p>The Global Store and Component Store are designed to solve different problems and can be used independently from each other. The detailed comparison can\nbe found at <a href=\"guide/component-store/comparison\">Store vs ComponentStore</a> section.</p>\n\n</div>\n\n<!-- links to this doc:\n - docs\n - guide/store\n - guide/store/why\n-->\n<!-- links from this doc:\n - api/component-store/ComponentStore#state$\n - api/effects/EffectNotification#effect\n - api/store/select\n - guide/component-store#installation\n - guide/component-store#key-concepts\n - guide/component-store#ngrxcomponent-store\n - guide/component-store#ngrxstore-or-ngrxcomponent-store\n - guide/component-store/comparison\n - guide/component-store/effect\n - guide/component-store/initialization\n - guide/component-store/install\n - guide/component-store/read\n - guide/component-store/write\n - https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/guide/component-store/index.md?message=docs%3A%20describe%20your%20change...\n-->"
4+
"contents": "\n\n\n <div class=\"github-links\">\n <a href=\"https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/guide/component-store/index.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n </div>\n\n\n<div class=\"content\">\n<div class=\"alert is-helpful\">\n<p><strong><a href=\"/guide/signals\"><b>NgRx Signals</b></a> is the new default.</strong></p>\n<p>The NgRx team recommends using the <code>@ngrx/signals</code> library for local state management in Angular.\nWhile ComponentStore remains supported, we encourage using <code>@ngrx/signals</code> for new projects and considering migration for existing ones.</p>\n</div>\n<h1 id=\"ngrxcomponent-store\">@ngrx/component-store<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#ngrxcomponent-store\"><i class=\"material-icons\">link</i></a></h1>\n<p>ComponentStore is a stand-alone library that helps to manage local/component state. It's an alternative to reactive push-based \"Service with a Subject\" approach.</p>\n<h2 id=\"key-concepts\">Key Concepts<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#key-concepts\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li>Local state has to be initialized, but it can be done lazily.</li>\n<li>Local state is typically tied to the life-cycle of a particular component and is cleaned up when that component is destroyed.</li>\n<li>Users of ComponentStore can update the state through <code>setState</code> or <code>updater</code>, either imperatively or by providing an Observable.</li>\n<li>Users of ComponentStore can read the state through <code><a href=\"api/store/select\" class=\"code-anchor\">select</a></code> or a top-level <code><a href=\"api/component-store/ComponentStore#state$\" class=\"code-anchor\">state$</a></code>. Selectors are very performant.</li>\n<li>Users of ComponentStore may start side-effects with <code><a href=\"api/effects/EffectNotification#effect\" class=\"code-anchor\">effect</a></code>, both sync and async, and feed the data both imperatively or reactively.</li>\n</ul>\n<p>The details about <a href=\"guide/component-store/initialization\">initialization</a>, <a href=\"guide/component-store/write\">writing</a> and <a href=\"guide/component-store/read\">reading</a> from state,\nand <a href=\"guide/component-store/effect\">side-effects</a> management can be found in the corresponding sections of the Architecture.</p>\n<h2 id=\"installation\">Installation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#installation\"><i class=\"material-icons\">link</i></a></h2>\n<p>Detailed installation instructions can be found on the <a href=\"guide/component-store/install\">Installation</a> page.</p>\n<h2 id=\"ngrxstore-or-ngrxcomponent-store\">@ngrx/store or @ngrx/component-store?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#ngrxstore-or-ngrxcomponent-store\"><i class=\"material-icons\">link</i></a></h2>\n<p>The Global Store and Component Store are designed to solve different problems and can be used independently from each other. The detailed comparison can\nbe found at <a href=\"guide/component-store/comparison\">Store vs ComponentStore</a> section.</p>\n\n</div>\n\n<!-- links to this doc:\n - docs\n - guide/store\n - guide/store/why\n-->\n<!-- links from this doc:\n - /guide/signals\n - api/component-store/ComponentStore#state$\n - api/effects/EffectNotification#effect\n - api/store/select\n - guide/component-store#installation\n - guide/component-store#key-concepts\n - guide/component-store#ngrxcomponent-store\n - guide/component-store#ngrxstore-or-ngrxcomponent-store\n - guide/component-store/comparison\n - guide/component-store/effect\n - guide/component-store/initialization\n - guide/component-store/install\n - guide/component-store/read\n - guide/component-store/write\n - https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/guide/component-store/index.md?message=docs%3A%20describe%20your%20change...\n-->"
55
}

0 commit comments

Comments
 (0)