Containers and components in ngrx/example-app

Question

I'm writing to ask about @ngrx good practises (I guess). I discovered Flux and Redux few months ago, but I have been using @ngrx in practise recently. I must admit that this is a very extensive but interesting topic.

---

Explain:

For the first step I used some tutorials and official example-app repository (can be found here -> ngrx/example-app). I'm impressed with how the use of @ngrx was shown and clean code. I created my own app using @ngrx based on ngrx/example-app but I have one important question:

In example-app you can find two kind of components. First in src/containers and second in src/components directory. I understand that containers using store, but data to components is passing by @Input's.

---

Question: What is the reason for this structure (effect on app)? Can all application components use app store?

Answer 1

Components (aka dumb or presentational) should not be aware of the app context, they should be quite "generic". That's why they should not use NGRX stores and remain loosely coupled with the rest of the app, and communicate with their parent only through @Input and @Output. It allows them to be reused on different parts of the app, for different purposes, even in other apps.

If your component cannot work without access to NGRX stores, it should be smart container, aware of the context it is used and interact with it.