Hey there, I'm struggling to figure out why my code is stuck in an infinite loop.
I've searched online extensively but haven't found a solution that fits my specific issue.
This is the code snippet causing the problem:
/**
* CODE SNIPPET TO RETRIEVE USERS FROM THE KEYCLOAK SERVER
*/
loadUsers$ = createEffect(() => this.action$.pipe(
ofType(LOAD_USERS),
switchMap(() => {
return this.userService.fetchAll().pipe(
map((data: T[]) => LOAD_USERS_SUCCESS({ list: data }))
)
}), catchError((err) => {
return of(LOAD_USERS_FAILED({ error: err }))
})
))
/**
* FETCHING GROUP FOR EACH USER
*/
loadUserGroup$ = createEffect(() => this.action$.pipe(
ofType(LOAD_USER_GROUP),
switchMap((action) => {
return this.userService.fetchGroupUser(action.id).pipe(
map((data: any[]) => LOAD_USER_GROUP_SUCCESS({ id: action.id, list: data }))
)
}), catchError((err) => {
return of(LOAD_USER_GROUP_FAILED({ error: err }))
})
))
Below are the dispatch methods used:
sub-component.ts
ngOnInit(): void {
console.log(`user id ${this.userId}`)
this.store$.dispatch(LOAD_USER_GROUP({ id: this.userId }))
}
parent.ts
users$: Observable<User[]> = this.store$.select(selectAll)
isLoading$: Observable<boolean> = this.store$.select(isLoading)
isLoadingOther$: Observable<boolean> = this.store$.select(isLoadingOther)
constructor(private store$: Store<any>) {
this.store$.dispatch(LOAD_USERS())
}
Reducer
export const userReducer = createReducer(
initialState,
// Loading Reducers
on(LOAD_USERS_SUCCESS, (state, { list }) => {
return adapter.addAll(list, {
...state,
selectedUserId: undefined,
isLoading: false,
})
}),
// More reducers...
)
I have verified that there are no recursive calls causing the infinite loop. However, the issue persists.
UPDATE: After removing a specific section from the reducer, the infinite loop stops. Yet, that section is necessary for updating the selected entity.
on(LOAD_USER_GROUP_SUCCESS, (state, { id, list }) => {
return adapter.updateOne({
id: id,
changes: { ...state.entities[id], group: list }
}, { ...state, isLoading: false, isOtherLoading: false, error: undefined })
}),
UPDATED: I have revised how I retrieve the user in just one component.
ngOnInit(): void {
// Code snippet here ...
}