RFC: Tracking Signal Changes

[rainerhahnekamp]

Information

Problem

Miscellaneous extensions such as DevTools, local storage sync, and undo/redo are constrained due to the glitch-free effect of Signals. This issue has already been raised in:

• angular/angular#56155 (comment)
• angular/angular#53703

It appears that no official mid-term solution will be provided.

Proposed Solution

The Signal Store's patchState function offers the potential for a workaround.

patchState is the sole function capable of updating the state and is fully controlled by ngrx/signals. It could track its calls and provide necessary information to any SignalStore feature that requires it.

Ideally, this functionality should be incorporated into the core (see angular/angular#53703). Implementing patchState shouldn't be too complex and could be seen as low-hanging fruit.

If there is interest, I am willing to develop a prototype.

---

Example

type StateChangeCallback<State> = (prev: State, current: State, diff: Partial<State>) => void;

// Using it in a feature
const withDevTools = (name: string, stateChangeCallback: StateChangeCallback<Record<string, unknown>>) => {
  // ...
}

// Using it in SignalStore
signalStore(
  withMethods((store, stateChangeCallback) => {
    // ...
  }),
  withHooks((store, stateChangeCallback) => {
    // ...
  });
)

The signalStore factory, as described in issue #4340, would work well in combination with withDevTools from the example.

Documentation page

No response

I would be willing to submit a PR to fix this issue

• [X] Yes
• [ ] No