As a newcomer to ngrx, I've come across a perplexing issue that has me stumped.
Essentially, I have a ListComponent that displays an array of ListItemComponents retrieved from a ngrx store.
@Component({
...
template: `
<list-item *ngFor="let item of item$ | async" [data]="item">
</list-item>
`
})
export class ListComponent implements OnInit {
item$: Observable<ListItem>;
constructor(private store: Store<ListState>) {}
ngOnInit() {
this.item$ = this.store.select(selectListItems);
}
}
Now, in the ListItemComponent, under specific conditions, I want to render another ListComponent where new items can be added. However, attempting to do so results in a Maximum call stack size exceeded error.
My theory is -- and feel free to correct me if I'm mistaken -- that because the nested ListComponent is accessing the same portion of state as the root ListComponent, it is recursively rendering the same list endlessly.
So my question is, how should I structure my selectors to ensure each nested ListComponent accesses the appropriate entry point in the state tree?
Edit
Here's a live example on StackBlitz. Although the logic for rendering a List within a ListItem differs in my application, the core issue remains the same.