Angular component service store interaction

Component

Can dispatch actions. Actions are events and can be used to initiate an effect or change the state.

Utilizes selectors to display data and change UI elements. Selectors focus on a certain part of the state.

Tests:

• Interaction with UI dispatches the action

• Changes to selectors changes the UI

Store effects

React to actions, create side effects

Tests:

• Matching actions call service

• Dispatches „[UI] loading“ action

• Dispatches service result action

Service

Coordinates and aggregates adapter calls

Does high level error handling, e. g. when one of a series of adapter calls fails.

Can trigger actions to indicate results (new data/success, errors).

Tests:

• Interaction between service and adapters.

• Error handling.

Adapter

Does http requests and other low level interface handling (e. g. local storage)

Converts low level errors to domain errors.

Converts API responses to domain types

Tests:

• HTTP calls

• Error handling

Sequence

1. UI component dispatches action „click“
2. • NgRx effect triggers action „[UI] loading“
   • Store reducer updates state
   • Component updated through NgRx selector
3. NgRx effect calls service
4. Service uses adapter(s) to query data
5. Adapter observable emits result or domain error
6. Service emits result or domain error to waiting effect
7. • NgRx effect triggers action „[UI] result“ or „[UI] query error“
   • Store reducer updates state
   • Component updated through NgRx selector