How to trigger store method via a signal state change

[caboodal]

I have what seems to be a simple scenario where I have a global store AuthStore that contains a signal for the current selected CompanyId which can be switched by the user via the UI at any given point. I then have a chart component that needs to refresh it's data if the CompanyId signal changes via a rxMethod method that makes a HTTP request to retrieve the new data.

The only solution I've found is to convert my signal to an Observable and subscribe to it as shown below. However, I was hoping that subscribing and unsubscribing in my components might become a thing of the past.

export class ChartDynamicPracticeCountComponent implements OnDestroy {
	public store = inject(ChartDynamicCompanyCountStore);
	public authStore = inject(AuthStore);

	public constructor() {
		this.companyChangedSubscription = toObservable(
			this.authStore.companyId,
		)
			.pipe(tap(() => this.loadChartData()))
			.subscribe();
	}

	public ngOnDestroy(): void {
		this.companyChangedSubscription?.unsubscribe();
	}

	private loadChartData(): void {
		var request: DynamicCompanyCountRequest = {
			name: "CompanyCount",
			startDate: DateFormatting.fromDateTimeToString(
				this.store.startDate(),
			),
			endDate: DateFormatting.fromDateTimeToString(this.store.endDate()),
		};
		this.store.load(request);
	}
}

When the user changes the company I need to refresh the chart data by calling loadChartData, this was all perfectly feasible using the Redux pattern with @ngrx/store via side effects, actions and reducers. Have I missed something or is my design just simply not conducive to this approach?

[david-shortman]

You can create an effect in your ComponentStore. Below is an example.

Note:
Effects in the ComponentStore work just like global effects in that they subscribe to any Observable.
You don't have to "call" a ComponentStore effect for it to run; all effects are subscribed to when the ComponentStore is initialized, and destroyed when the related component is destroyed.
When you "call" ComponentStore effects, you are really just pushing a value to a Subject that is created (and can be ignored) for ComponentStore effects.

class ChartDynamicCompanyCountStore extends ComponentStore<State> {
  private readonly authStore = inject(AuthStore);

  loadChartData = this.effect(() => {
    const companyIdChange$ = toObservable(authStore.companyId);
    return companyIdChange$.pipe(
      tap(companyId => {
        const request: DynamicCompanyCountRequest = {
          name: "CompanyCount",
          startDate: DateFormatting.fromDateTimeToString(
            this.startDate(),
            ),
          endDate: DateFormatting.fromDateTimeToString(this.endDate()),
        };
        this.load(request);
      })
    ); 
  });
}