Hello everyone,
I have built a blog app for learning angular. In this app I have a forum, with different ressorts and on this ressort page all questions to this ressort are rendered, I have on this fields a link to my singleQuestion page, where the question and its answers are rendered. This link works, I see it in the url and in the logs all functions and effects are called with the correct id of this forum question. And that works for one or two rounds where I click all the entries. But suddenly when this page opens, the url is correct, but the last opened entry is rendered and there it stucks. So I had opened the id 4, then I click on the id 5 and I have it in the url and in the logs but still the id 4 is rendered and that stays. I have broken this error down to the http-request in the effect. So this request is not made anymore after I clicked multiple questions. Here is the relevant code from my single component:
singleForum$: Observable<Forum> = this.store.select(selectForumData);
isLoading$: Observable<boolean> = this.store.select(selectForumLoading);
isError$: Observable<boolean> = this.store.select(selectForumError);
message$: Observable<string> = this.store.select(selectForumMessage);
id = this.router.snapshot.paramMap.get('id');
getUserId = this.singleForum$.pipe(
map((forum)=>forum.user_id)
)
forumUserId = this.getUserId.subscribe()
allAnswersToQuestion$: Observable<ForumAnswer[]> = this.store.select(selectAllAnswerToQuestion);
isAnswerLoading$: Observable<boolean> = this.store.select(selectForumAnswerLoading);
isAnswerError$: Observable<boolean> = this.store.select(selectForumAnswerError);
messageAnswer$: Observable<string> = this.store.select(selectForumAnswerMessage);
ngOnInit(): void {
this.store.dispatch(getForum({ id: parseInt(this.id!)}));
combineLatest([this.isError$, this.isAnswerError$]).subscribe(([isError ,isAnswerError])=>{
if(isError){
this.message$.subscribe((errorMessage)=>{
this.toastr.error(errorMessage)
})
}
if(isAnswerError){
this.messageAnswer$.subscribe((errorMessage)=>{
this.toastr.error(errorMessage)
})
}
})
}
This is the effect in my store:
getForum$ = createEffect(()=>
this.actions$.pipe(
ofType(getForum),
switchMap((action)=>{
console.log('i am triggered with', action.id)
return this.httpClient.get(this.api_url + 'find/'+ action.id).pipe(//this is not sending after multiple clicks
map((response:any)=>{
console.log(response, 'I get a response')
this.store.dispatch(getAllAnswersToQuestion({id: action.id}))
return getForumSuccess({forumData:response})
}),
catchError((error)=>{
console.log(error, 'I have one')
return of(getForumError({error}))
}
))
})
)
);
I have currently no errors in console or in the devtools.
Perhaps someone have seen this behaviour before and can help.
Thanks.