I'm currently developing an Angular app that uses NgRx as its state management solution. The app consists of different pages which each correspond to separate feature state.
I've also developed a set of reusable components that can be used in each feature. The components can emit a set of actions that influence the feature state.
I'm running into a problem now on how to "configure" which actions these shared components will dispatch.
For example: in feature A, the save button of my component should emit SAVE_A, while in feature B this should be SAVE_B.
I think I could solve it by using @Output then wiring the emits in the corresponding parent components, but this feels dirty and, seeing as these components are used throughout the app, I would like to avoid having to set up this wiring each time.
Alternatively, I could develop a set of wrapping components (SaveAButton, SaveBButton) and set up the link between the store and the reusable component there, but again this feels like I'm missing a point and that there should be an easier solution to this problem.
What would be a proper and clean solution to have reusable components directly tied to the store?