Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(): add topic about using component state from ngrx #92

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions content/ngrx/use-component-state.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
title: use component state
---

# Problem

Sometimes you'll need to handle component state, but it shouldn't be added to the global state because:
1) It'd bloat the global state
2) Specific state or UI state should belong to the component (like showing a previously hidden form when editing an item, this is something that should belong to the component state and not the global one)

# Solution

You can use NgRx component store package [@ngrx/component-store](https://ngrx.io/guide/component-store) which allows to have a component store for all the state requirements of the specific component you have.

**Key Concepts from the NgRx docs:**

- Local state has to be initialized, but it can be done lazily.
- Local state is typically tied to the life-cycle of a particular component and is cleaned up when that component is destroyed.
- Users of ComponentStore can update the state through setState or updater, either imperatively or by providing an Observable.
- Users of ComponentStore can read the state through select or a top-level state$. Selectors are very performant.
- Users of ComponentStore may start side-effects with effect, both sync and async, and feed the data both imperatively or reactively.