angularngrxngrx-storengrx-signal-store

How to track changes in ngrx/signals store in a component


I have signal store

export const Store = signalStore(
  withState(initialState),
  withMethods((store, userService = inject(UserService)) => ({
    getUser: rxMethod<string>(
      pipe(
        switchMap((id) => {
          return userService.get(id).pipe(
            tapResponse({
              next: (user) => patchState(store, { user }),
              error: console.error,
            })
          );
        })
      )
    ),
  }))
);

In component i use like

 public getUser(id: string): void{
    this.store.getUser(id)
  }

How can I track inside the component when the api call is completed, show notification for example?

Is it good practice to create status to track this api call?

type ArticlesState = {
  user: IUser;
  status: 'fulfilled' | 'loading' | 'error'
};

and handle it

 getUser: rxMethod<string>(
      pipe(
        tap(() => patchState(store, { status: 'loading'}),
        switchMap((id) => {
          return userService.get(id).pipe(
            tapResponse({
              next: (user) => patchState(store, { user, status: 'ful1filled' }),
              error: console.error,
            })
          );
        })
      )
    ),

Solution

  • I don't have much experience with signal store but there is nothing wrong with using status: 'fulfilled' | 'loading' | 'error' to track the current http status. I have used this technique a lot.

    You can also use the new Resource API which came out in Angular 19 to track the status. Although I'm not sure how well it pairs with Signal store atm. It's still in experimental mode but I have used it with no trouble.