State Management Technique of Angular 5 using NgRx

Introduction 

 

In this article, I explain an introduction to state management techniques of Angular 5 using NgRx.

 

Prerequisites:

 

Minimum knowledge of reactive programming.

 

What is NgRx

 

It is a framework for building reactive applications in angular. NgRx provides state management, isolation of side effects and developer tools that enhance developers' experiences when building many different types of applications.

 

Why NgRx use State Management?

 

NgRx provides state management for creating maintainable explicit applications and sorting a single state and the use of actions in order to express the state changes.

 

When should I use NgRx State Management?

 

When you build an application with a lot of user interactions and multiple data sources, or when managing state in services are no longer enough.

 

What is Ngrx/Store?

• It is a redux-inspired reactive state management.

What are the Characteristics

• Based on redux programming it is implemented.
• It has been made written with observables.

Benefits of NgRx/Store

 

Single source of truth

• It means that the state of your whole application is stored in an object tree within a single store.
• It supports a Testability feature.

Performance benefits

• Change detection strategy “OnPush”.
• We can use Immutable @Inputs.
• Object reference checks are fast.

Root and feature module support

• Eagerly loaded modules.
• Lazily loaded modules.

Principles of Redux Programming

• Single source of truth.
• The state is read-only.
• Pure functions update state.

Single source of truth

 

Another state management technique systems like flux that has multiple stores, But Redux enforce only one global store(storing the data in a Big object) through all the applications. We may have created multiple services in charge of each part of our application state and end up injecting those services in multiple components, with Redux. Centralize the data in one place.

 

It is easy to predict and maintain.

 

State is read-only

 

The state is read-only, which means we can only access the data, we can't do overwrites or any actions to mutate it or directly change the information. It follows immutable update patterns(read once immutable and mutable patterns in angular). We can able to do both testing and debugging.

 

Pure functions update state

 

Pure function are functions that accept an input and returns a value without modifying any data outside its scope. Its output or return value must depend on the input/arguments and Pure functions must return a value.

 

All remaining things will be covered in the next article