How to trigger a method in one NgRx Signal Store when a property in another store updates?

I am working with NgRx Signal Store in an Angular project, and I need to make one store DashboardStore reactively call a method when a property in another store FilterSelectionStore updates.

Use Case: FilterSelectionStore maintains a selectedFilters property, which i am updating whenever there is a change in filter selection

DashboardStore has a method loadDrivers, which should be executed whenever selectedFilters in FilterSelectionStore updates.

When selectedFilters updates in FilterSelectionStore, loadDrivers is not re-executed.How can I make DashboardStore reactively respond when selectedFilters in FilterSelectionStore updates?

Current Implementation: I have DashboardStore defined like this:

type TDashboardState = {
drivers: TDriver[];
};

const initialState: TDashboardState = {
drivers: []
};

export const DashboardFilterStore = signalStore(
// Initializes the store state
withState(initialState),

// Defines methods for loading drivers based on filters
withMethods((store) => {
const _driverService = inject(DriverService);

return {
loadDrivers: rxMethod<TSelectedFilters>(
pipe(
filter(({ organization, state, zones }) => !!organization && !!state && !!zones?.length),
distinctUntilChanged(isEqual),
switchMap(({ zones }) =>
_driverService.fetchDrivers({ zones: zones! }).pipe(
tapResponse<TDriver[], TResponse>({
next: (operationResult) => {
patchState(store, { drivers: operationResult });
},
error: () => {
patchState(store, { drivers: [] });
}
})
)
)
)
)
};
}),

// Hooks to watch for changes in another store
withHooks((store) => {
const _filterStore = inject(FilterSelectionStore);

return {
onInit() {
// Load drivers on store initialization
store.loadDrivers(_filterStore.selectedFilters());
}
};
})
);

Continue reading...