Using ngrx store vs @Input for simple communication between communication

Question

This question is about best practices, and when to use ngrx/store and when not. So I have a project I'm working on, and already using ngrx/store for the state management. I understand what ngrx/state is supposed to solve, but every now and then I came across a case where I'm not sure whether I'm supposed to use ngrx/store or not.

So here is the case: I have two components, one for listing the categories, and another for showing the category details. The category details can display a specific category by implementing either:

1. A field in the ngrx state, selectedCateogryId for example, and whenever it's selected in the first component, it fires an action updating the field in the ngrx state, while the second component is subscribed to the select ngrx/store selectedCateogryId field

2. Or Use a basic @Input CategoryId in the second component, and use the attribute in the first component <second-component [category_id]="category.id"></second-component>

My question is what would be the right approach, should I be using ngrx/store for something so simple like this (since I'm already using ngrx/store in the app), or, just use the @Input binding for simple component communication.

Answer 1

When there's a direct communication between components, to be exact, there's a parent, child relationship, it's better to use @Input in my opinion. Why?! Here are some reasons:

1. It's easier. You don't have to write action, reducer, selectors to make this simple thing work
2. The business completely stays within the component. Otherwise, you have to be careful, if any other component is using the same state and doing it's own business.