Add new comment

Angular component service store interaction

Submitted by Erik Wegner on Sun, 01/29/2023 - 19:23
Aufmacherbild

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“
    • NgRx effect triggers action „[UI] loading“
    • Store reducer updates state
    • Component updated through NgRx selector
  2. NgRx effect calls service
  3. Service uses adapter(s) to query data
  4. Adapter observable emits result or domain error
  5. Service emits result or domain error to waiting effect
    • NgRx effect triggers action „[UI] result“ or „[UI] query error“
    • Store reducer updates state
    • Component updated through NgRx selector
StoreComponentServiceAdapter1324567HeadRow 2Row 3
Associated categories

Angular

Angular is a framework for writing applications running in browsers on the client side. Apps are written in TypeScript and compiled to JavaScript.

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.