We are developing components for an app with Angular 5 and ngrx. Each entity (e.g. Menu
, List
, Config
) consists of
- Component (
*.html
,*.scss
,*.ts
) - Action (
*.ts
, Injectable) - Reducer (
*.js
) - plus Spec-files
except for entities without a view (e.g. Config), which do not have a component.
We have an Config-Action and Config-Reducer with which we store the options the user selects in the Menu. Because some Actions depend on each other, I recently ran into a circular-dependency-error:
- Clicking on an item in the
Menu
calls a List-Action (which shows a List to the user) - Selecting an item from the
List
calls a Config-Action (to store the selection) - The Config-Action calls a Menu-Action (to write the selection into a field in the menu)
There is our circular dependency and it won't be the last on the Redux-"Call actions to do stuff"-approach. I'm trying to handle it with Injector but this seems like a workaround. I'm looking for a solution which is more clean, as the Actions are not called in the constructor.
Is there a clean way to inject Actions into one another without creating a circular dependency?