如何在另一个NgRx Signal Store属性更新时触发当前Store方法？

当前代码仅在DashboardStore初始化时调用一次loadDrivers，无法响应FilterSelectionStore中selectedFilters的更新。要实现响应式调用，需通过监听信号变化的方式，在selectedFilters更新时自动触发loadDrivers。

修改方案 #

利用Angular的effect函数监听selectedFilters信号的变化，替代原有的仅初始化调用逻辑：

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

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

export const DashboardStore = signalStore(
  withState(initialState),

  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: [] });
                }
              })
            )
          )
        )
      )
    };
  }),

  withHooks((store) => {
    const _filterStore = inject(FilterSelectionStore);
    // 注入effect并监听selectedFilters变化
    inject(effect)(() => {
      const filters = _filterStore.selectedFilters();
      store.loadDrivers(filters);
    });

    return {};
  })
);

关键说明 #

1. effect的作用：effect会自动监听selectedFilters信号的变更，每次信号值更新时都会执行回调函数，调用loadDrivers。
2. 覆盖初始化场景：effect在创建时会自动执行一次回调，替代了原onInit中的手动调用，既处理了初始化加载，又响应后续过滤器更新。
3. 原有逻辑保留：loadDrivers中filter和distinctUntilChanged的逻辑依然生效，确保只有有效且变化的过滤器才会触发请求，避免不必要的重复调用。

内容的提问来源于stack exchange，提问作者RAHUL KUNDU