NgRx — Basics

Jawadhasan
8 min readFeb 24, 2024
Photo by amirali mirhashemian on Unsplash

Introduction

NgRx is a framework for building reactive applications.

It is Redux pattern tailored for Angular.

The purpose of NgRx is to provide a formal pattern for

  • Organizing State: our application state into one single local state container.
  • Managing State: by requiring a one-way data flow.
  • Communicating state changes: to our components so they can react accordingly.

Key Concepts

@ngrx/store: Store is RxJS powered global state management for angular apps.

Actions: describe unique evens that are dispatched from components and services.
Reducers: state changes are handled by pure functions called reducers.
Selectors: are pure functions used to select, derive and compose pieces of state.
State: is accessed with the state, an observable of state and an observer of actions.

- for Local State Management Try using NgRxComponentStore.

NgRx State Management Life-cycle.

--

--

Jawadhasan
Jawadhasan

Written by Jawadhasan

Software Solutions Team Lead | Cloud Architect | Solutions Architect

No responses yet