Digested

Observables and Ngrx are complex. As with any technology, it is very very easy to forget what you are trying to accomplish as you wade through the details.

Start and end by thinking "What do I want to accomplish".

These tools are capable of taking a very complex problem and simplifying it. That has been my experience.

But they are also capable of taking a simple situation and making it very complicated. 

Start with defining the State. It is the data the view needs to render over time. How would you think about this problem.

Where is the data coming from? Usually an api. 

What does the data look like from the api? Usually not what you need for the view, so the observable chain or the reducer functions would take this maybe complex tree and transform it into what your view needs. 

How do I know what the data looks like? Tap is your friend. tap(value => console.log('note from where', value) in the observable chain tells you the shape. As you change it, use a tap to verify.

What shape do I want? Flat and simple. <div *ngFor="let item of items$ | async> should give you an item that can be passed to a component for viewing or editing. So either in the effect, observable chain or reducer, transform the data into that shape.

If you are fighting with nested arrays and complex objects, make it simple. Create a relation key scheme using Entities so that the selectors are easy and fast. A one time cost of insertion vs. the every time you subscribe cost of transformation.

With most complex technical issues, framing a question is often the most difficult thing. The question here is what should my ngrx selector or observable chain emit to make my component simple? When you have answered that, the specific details of how to construct the chain, reducer, selector etc. becomes a matter of coding and testing.

What do I want to accomplish? What is the shape of the data I need?