@ngrx select specific slice of state from store when using a smart component recursively

I think you're right:

My guess is, and correct me if I'm wrong, since the nested ListComponent is accessing the same slice of state as the root ListComponent, its just trying to nest and render the same list over and over and over again into infinity.

Try updating ListComponent to accept a component input variable of ListItemComponent. See working example https://stackblitz.com/edit/angular-ngrx-recursive-components-7mzncj

In that example, the 5th ListItemComponent also renders a ListComponent. However, when clicking the "add element to list" button on that 5th ListItemComponent, the code is still adding the new elements to the parent list. I'm guessing you'll want to update your logic for how that is handled. Not sure what you're trying to accomplish.

The core problem is that the list is generating itself. So if a list generates another list, you run into the recursive problem. By using component input variables, you can stop the list from generating itself and eliminate the recursive problem.

Update:

I came to this answer on my own, but I just noticed that @FanCheung, in the comments, previously proposed what is basically this solution.