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);
      })
    ); 
  });
}

[Sh3ldoris]

Hello, in a SignalStore, I wouldn't recommend you create an effect to manage data changes. As it is mentioned in Angular docs https://angular.dev/guide/signals#use-cases-for-effects. I would rather do similar as you did with toObservable:

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

	public constructor() {
		toObservable(
			this.authStore.companyId,
		)
		.pipe(takeUntilDestroyed())
		.subscribe(() => {
			this.store.load({
				name: "CompanyCount",
				startDate: DateFormatting.fromDateTimeToString(
					this.store.startDate(),
				),
				endDate: DateFormatting.fromDateTimeToString(this.store.endDate()),
			});
		});
	}
}

Or something like this https://ngrx.io/guide/signals/rxjs-integration#handling-api-calls where I have rxMethod within your ChartDynamicCompanyCountStore with some input, and then in your component, you call the rxMethod with the this.authStore.companyId signal, so every time the signal changes, the rx method is called.

[david-shortman]

The angular docs discussion about the Signal effect function is unrelated to the goal or implementation of NgRx Component Store effects.

A component store effect is just a Subject + Subscription, and you can choose to ignore the subject and just use it for a subscription. Component store effects have the bonus of being subscribed immediately upon declaration in class construction.

rxMethod is a suitable replacement, but it's basically just Component Store effect where you have to initialize it by calling it somewhere. I'd recommend using rxMethod over manually setting up a subscription somewhere.

You can declare an rxMethod anywhere, and it could be suitable to define it with an existing component store if you wanted to make state updates:

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

  loadChartData = rxMethod<string>(
    pipe(
      tap(companyId => {
        const request: DynamicCompanyCountRequest = {
          name: "CompanyCount",
          startDate: DateFormatting.fromDateTimeToString(
            this.startDate(),
            ),
          endDate: DateFormatting.fromDateTimeToString(this.endDate()),
        };
        this.load(request);
      })
    )
  );

  ngrxOnStoreInit() {
    this.loadChartData(this.authStore.companyId);
  }
}