I'm trying out Ngrx signal store. I watched couple of tutorials and read official documentation. Videos on youtube are pretty simple and docs didn't cover that.
I'm trying to use withHooks
onInit
method to fetch data on store init, but problem is that API endpoint I'm using requires param, but passing params into method is not covered, or at least I didn't manage to find solution. Should I ditch fetching in signalStore
onInit
and move to standard component ngOnInit
? Also that prop is passed into component over signal input
. Example code below.
export const PostsStore = signalStore(
withState<PostsStateInterface>({
post: {},
error: null,
isLoading: false
}),
withMethods((store, postsService = inject(PostsService)) => ({
loadPosts: rxMethod<number>(
pipe(
switchMap((id) => {
return postsService.getPost(id).pipe(
tap((posts) => {
patchState(store, { post })
})
)
})
)
)
})),
withHooks({
onInit(store) {
store.loadPost(id) // Call the loadPost method with the id, how to get the id?
},
})
)
@Component({
...
standalone: true,
providers: [PostsStore],
imports: [
...
],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ImageProcessing360ContainerComponent {
id = input.required<number>()
store = inject(PostsStore)
}
What you are looking for is covered under
So what you need to do according to the docs is not to load the data in the stors withHooks-> onInit -> loadPosts
but rather in the component in the ngOnInit -> store.loadPosts(id)
.