NgRx

NgRx is a reactive state management library for Angular based on the Redux pattern and powered by RxJS. It helps you model application state as a single immutable source of truth, describe state changes with actions, and derive view data with selectors and effects.

NgRx applies to Angular applications only. There is currently no equivalent state-management pattern documented for React applications in OneCX.

For why OneCX Angular applications use NgRx, see the State Management concept page.

What Is NgRx?

  • A set of libraries for Angular to manage global and feature state in a predictable and testable way.

  • Core building blocks:

    • Actions: Plain events that describe what happened.

    • Reducers: Pure functions that compute new state from the previous state and an action.

    • Selectors: Memoized queries to read and derive data from state.

    • Effects: Side-effect handlers for async work (HTTP, routing, etc.).

    • Entity/ComponentStore/Router Store/DevTools: Optional libraries to simplify common patterns.

Overview

Use NgRx when you need any of the following:

  • Shared state across multiple routes/components and modules.

  • Complex async orchestration (load, cache, error handling, retries).

  • Auditability and predictability (time-travel debugging, action logs).

  • Derived data that benefits from memoization via selectors.

Prefer local component state or ComponentStore for purely local/ephemeral UI concerns. Avoid putting computed/derivable data into the store; compute it via selectors instead.

Core Packages

  • Store: @ngrx/store — application and feature state containers.

  • Effects: @ngrx/effects — side-effects and async flows.

  • Entity: @ngrx/entity — helpers for collections (ids, dictionaries, adapters).

  • Router Store: @ngrx/router-store — integrates Angular Router state.

  • ComponentStore: @ngrx/component-store — local, component-scoped state management.

  • Store DevTools: @ngrx/store-devtools — time-travel debugging via Redux DevTools.

Pages in this section