State & Data Flow

Application state in both portals is managed with NgRx 19, and all of it lives in the shared library (projects/ft-common/store/src, imported as @ft/common/store).

NgRx building blocks

Package Role

@ngrx/store

Central, immutable application state (reducers, selectors, actions).

@ngrx/effects

Side effects — API calls to the UI Backend and other async work.

@ngrx/entity

Normalised collections (entity adapters) for list-heavy feature state.

@ngrx/router-store

Connects Angular Router state into the store.

@ngrx/operators

Shared RxJS operators for effects (concatLatestFrom and friends).

@ngrx/store-devtools

Redux DevTools integration in development builds.

Store layout

projects/ft-common/store/src is split into actions/, reducers/, effects/ and selectors/, with one file (or folder) per feature slice:

Slice Holds

authentication

Token, current user, login and change-password state.

menu, tab, pagination, notification

UI state: navigation entries, open tabs, list paging and toast notifications.

device-profiles, device-update

Device profile definitions and device update operations.

group-update, file-management

Bulk operations and stored firmware/configuration files.

automation

Automation rules.

monitoring, reports

Monitoring data and report definitions.

settings, system

Platform settings (including AIServiceConnectionURL and the Grafana dashboard URLs) and system information.

connectivity

Backend reachability state used by the connectivity indicator.

Data flow (high level)

  1. A component dispatches an action.

  2. A reducer updates the store, and/or an effect calls the UI Backend through ApiService.

  3. The effect dispatches a success/failure action; the reducer stores the result. Failures also pass through ErrorHandlerInterceptor, which raises a notification.

  4. Components select the data via selectors and render it.

Because the store lives in ft-common, a feature slice written once is available to both portals; only the routed feature modules differ.

Related pages