Feature: Add support to the NgRx Store for dispatching actions that read signals

[brandonroberts]

Which @ngrx/* package(s) are relevant/related to the feature request?

store

Information

Had a discussion started by @manfredsteyer on using an effect to dispatch actions. Straightforward example.

class MyComponent {
  id = input();

  constructor() {
    effect(() => {
     store.dispatch(Actions.myAction(this.id()));
    });
  }
}

This works fine, but is a bit repetitive and requires the use of an effect in user-land code.

This would potentially make this a first class method on the Store, such as:

store.dispatch(() => Actions.myAction(this.id()));

This would listen for changes to the signal(s) and run the dispatch callback. It would also be run in the correct injection context using logic similar to the PR below, so it's cleaned up correctly when used at the component level even though the Store is a root provider.

#4529

This would also encourage less use of effect in user-land code for this use case.

Describe any alternatives/workarounds you're currently using

Use a Signal Store in the component as a proxy between the component and global Store.

const MyStore = signalStore(
  withMethods((globalStore = inject(Store)) => ({
    listenToID: rxMethod<string>(trigger$ =>
      trigger$.pipe(tap(val => {
        globalStore.dispatch(Actions.myAction(val))
      }))
  }))
)

class MyComponent {
  id = input<string>();
  store = inject(MyStore);

  constructor() {
     store.listenToID(this.id);
  }
}

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

• Yes
• No