Multiple entity and not entity states in Angular's NgRx?

Question

Using Angular 9 and NGRX on a component I need to display:

• A list of recent posts;
• A list of top posts;
• A list of tags
• Hold a Search query string

I created a Post State:

export interface PostState extends EntityState<Post> { }

Questions

1. If the component needs Recent Posts, Top Posts, Tags and QueryString should I have 4 states?

2. Do I need 2 Post States (Recent and Top) if what differs is how they are loaded from the database (maybe using Effects)?

3. How to wrap all states in a Component's state?

Answer 1

1. There's only one big state. You're using the selectors to get a slice of that state. Therefore 4 selectors ( or 3 if you don't need to separate posts)
2. I would utilize effects here, since any server requests are considered side effects.
3. To prevent your component from being a jack of all trades, I would recommend using an abstraction layer called Facade. That way your component can get data from facade via observables and dispatch actions via Facade api. Inside the facade you will have all the slices of state you need (selectors).