NgRx — Basics

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.