NgRx – Basics

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.

Note: All actions that are dispatched within an application are always first processed by the reducers before being handled by effects.

You can check more details on the official website.

NgRx – The Redux Pattern

Patterns brings order to chaos.
Redux is a predictable state container for JavaScript application.

Redux principles:

1. Single source of truth called the Store.
2. State is read-only and only changed by dispatching Actions.
3. Changes are made using pure functions called Reducers.

Lets explore a little bit further

We’ll now stop at this point and next article will cover how to strongly type our application state and actions.

The source code of this application is available on this git repository and online deployed application can be accessed from this URL.

Summary

In this post, we covered the first steps towards centralized state management for our application using NgRx which is Redux pattern tailored for Angular.

We installed the NgRx store and wire-it up in our application. We saw, how we can structure our application state in small slices for easy maintenance using Feature Module State Composition which is very similar to how we structure our application in multiple features.

We installed Redux DevTools and saw how this helps us with advanced debugging of our application.

Let me know if you have some questions or comments. Till next time, happy coding.