feat(signals): add withLinkedState()
#4818
Open
+762
−6
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for ngrx-io ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for ngrx-site-v19 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
rainerhahnekamp
force-pushed
the
signals/feat/with-linked-state
branch
from
7bc804e to
7b04ea5
Compare
Generates and adds the properties of a `linkedSignal`
to the store's state.
## Usage Notes:
```typescript
const UserStore = signalStore(
withState({ options: [1, 2, 3] }),
withLinkedState(({ options }) => ({ selectOption: () => options()[0] ?? undefined }))
);
```
The resulting state is of type `{ options: number[], selectOption: number | undefined }`.
Whenever the `options` signal changes, the `selectOption` will automatically update.
For advanced use cases, `linkedSignal` can be called within `withLinkedState`:
```typescript
const UserStore = signalStore(
withState({ id: 1 }),
withLinkedState(({ id }) => ({
user: linkedSignal({
source: id,
computation: () => ({ firstname: '', lastname: '' })
})
}))
)
```
## Implementation Notes
We do not want to encourage wrapping larger parts of the state into a `linkedSignal`.
This decision is primarily driven by performance concerns.
When the entire state is bound to a single signal, any change - regardless of which part -
- is tracked through that one signal.
This means all direct consumers are notified, even if only a small slice of the state actually changed.
Instead, each root property of the state should be a Signal on its own. That's why
the design of `withLinkedState` cannot represent be the whole state.
rainerhahnekamp
force-pushed
the
signals/feat/with-linked-state
branch
from
7b04ea5 to
4337ebf
Compare
Co-authored-by: michael-small <33669563+michael-small@users.noreply.github.com>
|
@markostanimirovic, @timdeschryver this one has been rebased to main and is now ready for review. |
rainerhahnekamp
commented
Jul 4, 2025
markostanimirovic
requested changes
Jul 5, 2025
Co-authored-by: Marko Stanimirović <markostanimirovic95@gmail.com>
Co-authored-by: Marko Stanimirović <markostanimirovic95@gmail.com>
Co-authored-by: Marko Stanimirović <markostanimirovic95@gmail.com>
Co-authored-by: Marko Stanimirović <markostanimirovic95@gmail.com>
Co-authored-by: Marko Stanimirović <markostanimirovic95@gmail.com>
Co-authored-by: Marko Stanimirović <markostanimirovic95@gmail.com>
|
Closing because of stalling github processing (more than 2 hours) 
|
Co-authored-by: Marko Stanimirović <markostanimirovic95@gmail.com>
|
@markostanimirovic, @timdeschryver, I think I've applied all necessary changes (including the docs). We can do another round of review. |
msmallest
reviewed
Jul 7, 2025
| - Functions that return values, which the SignalStore wraps automatically into a `linkedSignal()`, or | ||
| - `WritableSignal`, which the user can create with `linkedSignal()`. | ||
|
|
||
| ### Implicit Linking |
There was a problem hiding this comment.
I think all three of these ### h3's should be ## h2's due to the precedence of header sizes
msmallest
reviewed
Jul 7, 2025
projects/ngrx.io/content/guide/signals/signal-store/linked-state.md
Outdated
Show resolved
Hide resolved
msmallest
reviewed
Jul 7, 2025
|
|
||
| <code-example header="book-store.ts"> | ||
|
|
||
| import { signalStore, linkedSignal } from '@ngrx/signals'; |
There was a problem hiding this comment.
Suggested change
| import { signalStore, linkedSignal } from '@ngrx/signals'; | |
| import { linkedSignal } from '@angular/core'; | |
| import { signalStore, withLinkedState, withState } from '@ngrx/signals'; |
There was a problem hiding this comment.
linkedSignal should be imported from @angular/core, not @ngrx/signals. withLinkedState import is missing
There was a problem hiding this comment.
Ah yes, good catch, thanks.
Suggestion updated
msmallest
reviewed
Jul 7, 2025
|
|
||
| <code-example header="book-store.ts"> | ||
|
|
||
| import { signalStore, linkedSignal, withLinkedState } from '@ngrx/signals'; |
There was a problem hiding this comment.
Suggested change
| import { signalStore, linkedSignal, withLinkedState } from '@ngrx/signals'; | |
| import { linkedSignal } from '@angular/core'; | |
| import { signalStore, withLinkedState, withState } from '@ngrx/signals'; |
edit: imports respectively from Angular itself and the store
msmallest
reviewed
Jul 7, 2025
| safeSelectedOption: linkedSignal({ | ||
| source: selectedIx, | ||
| computation: (sel, previous) => { | ||
| const ix = selectedIx(); |
There was a problem hiding this comment.
Done (example changed)
msmallest
reviewed
Jul 7, 2025
| safeSelectedOption: linkedSignal({ | ||
| source: selectedIx, | ||
| computation: (sel, previous) => { | ||
| const ix = selectedIx(); |
There was a problem hiding this comment.
Done (example changed)
markostanimirovic
requested changes
Jul 7, 2025
projects/ngrx.io/content/guide/signals/signal-store/linked-state.md
Outdated
Show resolved
Hide resolved
projects/ngrx.io/content/guide/signals/signal-store/linked-state.md
Outdated
Show resolved
Hide resolved
projects/ngrx.io/content/guide/signals/signal-store/linked-state.md
Outdated
Show resolved
Hide resolved
projects/ngrx.io/content/guide/signals/signal-store/linked-state.md
Outdated
Show resolved
Hide resolved
|
|
||
| <code-example header="book-store.ts"> | ||
|
|
||
| import { signalStore, linkedSignal } from '@ngrx/signals'; |
There was a problem hiding this comment.
linkedSignal should be imported from @angular/core, not @ngrx/signals. withLinkedState import is missing
projects/ngrx.io/content/guide/signals/signal-store/linked-state.md
Outdated
Show resolved
Hide resolved
projects/ngrx.io/content/guide/signals/signal-store/linked-state.md
Outdated
Show resolved
Hide resolved
projects/ngrx.io/content/guide/signals/signal-store/linked-state.md
Outdated
Show resolved
Hide resolved
…te.md Co-authored-by: Marko Stanimirović <markostanimirovic95@gmail.com>
…te.md Co-authored-by: Michael Small <85510853+msmallest@users.noreply.github.com>
…te.md Co-authored-by: Marko Stanimirović <markostanimirovic95@gmail.com>
…te.md Co-authored-by: Marko Stanimirović <markostanimirovic95@gmail.com>
…te.md Co-authored-by: Marko Stanimirović <markostanimirovic95@gmail.com>
…te.md Co-authored-by: Marko Stanimirović <markostanimirovic95@gmail.com>
|
@markostanimirovic, @michael-small Wow, what a review. Corrections outnumbered the actual code by a margin...a review for the records 😅 . I seriously owe you both a drink for that. I've applied all the changes and double-checked. I also updated the jsdoc for |
markostanimirovic
approved these changes
Jul 8, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is a non-breaking feature to support
linkedSignal.This branch is based on #4795 which has to be merged first.
Please read the comment in #4781
withLinkedStategenerates and adds the properties of alinkedSignalto the store's state.Usage Notes:
The resulting state is of type
{ options: number[], selectOption: number | undefined }.Whenever the
optionssignal changes, theselectOptionwill automatically update.For advanced use cases,
linkedSignalcan be called withinwithLinkedState:Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Closes #4781
What is the new behavior?
Does this PR introduce a breaking change?
Other information