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,
})
);
})
)
),
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,
})
);
})
)
),
- I would say it is a good idea to write the result of your request into the store. You might also want to write the error state as well. You can have a look at the method withCallState from the ngrx-toolkit – kerosene Commented Feb 7 at 14:13
1 Answer
Reset to default 0I 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.