Introduction

• This blog is a brief explanation of how to use Redux State Management in Angular. We are going to look in to the necessary steps for managing states with NgRx in Angular.

• If you are new to Angular Redux (NgRx), sit back, have coffee and blast in angular with NgRx.

What is NgRx?

• NgRx is a framework for building reactive applications in Angular. It provides global and local state management using several build-in components.

1. Store           – The store is what holds the app’s state. 
2. Action         – A unique event dispatched from components and services that describe how the state should be changed.
3. Reducer      – All the state changes happen inside the reducer; it responds to the action, based on that action, it will create a new immutable state and return it to the store.
4. Selector      – Selector is a function used for obtaining a part of the state from the store.
5. Effect          – A mechanism that listens for dispatched actions in an observable stream, processes the server response, and returns new actions either immediately or asynchronously to the reducer to change the state.
6. NgRx follows the Redux Pattern to manage the states(data).

Why NgRx and what it is trying to solve?

• If you have list of data and edit it, that should update the state of data. In this case we going for global variables for state managing. In this method changes do not reflect to dependent components and UI (rather than service).
• NgRx updates the states and instant reflect to dependent components and UI.
• Eventually, when you handle high complexity components in Angular project you can’t handle with services. Here, NgRx helps to overcome the complexity with ‘Store’.
• Lifecycle of NgRx is shown below,

Prerequisites

• Nodejs: https://nodejs.org/
• Angular CLI: https://cli.angular.io/

Installation

• Install ngRx/schematics. NgRx Schematics provides scaffolding. (By default, schematics are integrated with @angular/cli).

ng add @ngrx/schematics@latest

• Install store dependency application.

ng add @ngrx/store –save

Conclusion

• In this post, we learnt what is ngRx and why it is used for complex projects. In future post, let’s look the first component @ngrx/store.