Understanding of ngRx with Redux in Angular

Understanding of ngRx with Redux in Angular

In this post is useful for you to get the basic understanding of ngrx with redux after reading this post and you will start using it in your application

Originally published by Nitin Arora at https://blog.knoldus.com

In this post, we will see the basic pattern of Redux and some benefits and some high-level concepts of redux and then we will discuss the brief about ngRx and its basic implementation.

Redux: Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time-traveling debugger.

Redux is available as a package on NPM for use with a module bundler or in a Node application:

npm install --save redux

So let’s discuss the basic concepts of redux which are also used for Redux.


So now we will see the overall concept of redux and see hows it works. Here, we can see that we have a UI and when a user performs an action it will change the state of the data.

Here the question arrives, What is the state?

Basically, all the application data is collectively known as the store and it is to be represented as a state. Also, we cannot change the state as it is immutable. We can change the state only using Action, which itself is an object which included two things:

1: Type: Type is nothing but it is an Action Name.

2: Payload: Alternatively, Payload is something we can refer to as Action Data.

Example of Action:

{ type: ‘DELETE_ITEM’, payload: 123 }

Here, you can see that in action, Delete_Item is our action name and 123 is an action data.

So How’s it works?

1: When data changes, the existing state is duplicated, then a new object is created with the updates. In Angular this data is treated as an RxJS Observable, allowing us to subscribe to it from anywhere in the app.

2: When an event is emitted, for example, a button click, the action is sent to a reducer function to converts the old state into the new state.

NgRx: The ngRx is an angular version of the redux pattern. Which is inspired by the group of libraries inspired by flux pattern. what do I mean with “angular/rxjs” version of redux The angular part is because ngrx is a library to use within an angular application. The rxjs “part is because of the implementation of ngrx works around an rxjs flow.

How to configure ngRx?

You can set up ngRx with just 2 steps described below:

1: create one new app with Angular-CLI and give it any name to it.

ng new ngrxProject --routing
cd ngrxProject

2: Install the ngrx/store via npm in your system with the following command.

sudo npm install @ngrx/core @ngrx/store --save

Now let us understand this concept with the help of the basic example shown below:

app.module.ts

Here, in this file, we need to update the app module file with the post reducer, for that we need to import the post reducer.

import { StoreModule } from '@ngrx/store';
import { simpleReducer } from './simple.reducer';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
StoreModule.forRoot({ message: simpleReducer })
],
bootstrap: [AppComponent]
})
export class AppModule { }

ngrx.reducer.ts

Now, we will create one another file in which we create the reducer.

import { Action } from '@ngrx/store';

export function simpleReducer(statement: string = 'I am learning',
action: Action) {

switch (action.type) {

	case 'German':
	  return statement = 'Ich lerne'

           case 'FRENCH':
             return statement = 'j'apprends'

	default:
	return statement;      
}

}

So, here we have switch statements with the possible actions and this whole function is collectively known as a reducer. In this function, the switch statement returns the statement as ‘i am learning’ in different languages depending upon the actions.

app.component.ts

  • So now if we want to change the state and we will use the class store then we need to implement interface corresponding to the object necessary to pass to the ngModule.
  • A variable for message$  is set as an Observable on the component by calling this.store.select(‘message’).
  • We trigger state changes by sending actions to the reducer with this.store.dispatch (‘ACTION’).
import { Component } from '@angular/core';

import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';

interface AppState {
message: string;
}

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {

message$: Observable<string>

constructor(private store: Store) {
this.message$ = this.store.select('message')
}

germanMessage() {
this.store.dispatch({type: 'GERMAN'})
}

frenchMessage() {
this.store.dispatch({type: 'FRENCH'})
}
}

Now we can subscribe to the Observable in the HTML and trigger changes with button click events.

<h2>{{ message$ | async }}</h2>

<button (click)="GermanMessage()">German</button>
<button (click)="frenchMessage()">French</button>

Conclusion: I hope this blog is useful for you to get the basic understanding of ngrx with redux after reading this blog and you will start using it in your application.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about Angular

Angular 8 (formerly Angular 2) - The Complete Guide

Angular & NodeJS - The MEAN Stack Guide

The Complete Node.js Developer Course (3rd Edition)

The Web Developer Bootcamp

Best 50 Angular Interview Questions for Frontend Developers in 2019

How to build a CRUD Web App with Angular 8.0

React vs Angular: An In-depth Comparison

React vs Angular vs Vue.js by Example

Microfrontends — Connecting JavaScript frameworks together (React, Angular, Vue etc)

Building CRUD Mobile App using Ionic 4, Angular 8


Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

Hire Now: https://bit.ly/394wdOx

Important reasons for developers to adopt Angular JS development

 Important reasons for developers to adopt Angular JS development

In the current scenarios, e-commerce companies are very keen to create an online impact. The web and app development market are at its peak of popularity. There is a high demand for web and app developers with a growing number of websites. Angular...

In the current scenarios, e-commerce companies are very keen to create an online impact. The web and app development market are at its peak of popularity. There is a high demand for web and app developers with a growing number of websites. Angular has been a top choice for web development and it's the latest version AngularJS has gained popularity in the industry. This java script framework has created its prominent position in creating web apps.
Regardless of whether there are numerous different systems accessible for web development, AngularJS can support among them all. Since its introduction in the market, Angular has been creating waves in the market.

Introduction

Angular js is a powerful framework that was developed by Google. It is used to build dynamic apps with power-packed features. It was first introduced in 2010 and created by developers at Google. This framework was created to simplify and remove the challenges in creating dynamic apps. It uses HTML, CSS, and java script to create dynamic single-page applications. Angular Js is inclusive of Mongo DB and it is a frontend fragment of Mean Stack. In the developer's community, Angular is considered as a reliable and fast Java script framework. Many popular apps like PayPal. You tube, Netflix, the guardian, Lego are built using the AngularJS framework.

In this blog, we are listing some compelling reasons to pick angular development to familiarize you with its potential

• Open-source framework: It is not a library but open-source frameworks that enable the developers to build well-performing single page web applications. Just after its launch, it became hugely popular among the developers and it is not going to come at a halt.

• Simplified MVC structure: Developers use AngularJS to build robust and interactive web applications. AngularJS framework uses MVC architecture to create interactive applications. AngularJS makes it easy for developers to create apps as they are only required to split the applications.

• Extensive community: As angular is built by Google, it is backed by a very large community of professionals. The Angular JS conferences of the professionals are held all over the world. Hackathons are also organized in IT communities that include some professional and skilled engineers who can help with the queries and questions related to Angular.

• Declarative code system: In Angular JS developers can create declarative patterns by using declarative paradigms. It enables developers to be less heavy, and easy to read. In this framework, the developers get data models that are not too complex to write that abolishes the need to use any getter/setters and with easy data manipulation.

• Two-way data binding: It is one of the impeccable features that makes Angularjs popular in the developers' community. It allows seamless projections of the models and data binding. In this framework, any changes in the user interface make an impact on the application objects. The developers are not required to fresh the cycle and that makes it vulnerable to bugs.

• Using directives: AngularJS makes use of Directives as the developers can build custom HTML tags that function as custom widgets and it can be possible using directives. Its implications are also in the case of the use of decorating components and manipulation of DOM elements in appealing ways.

• Enterprise-level testing: When using Angular JS there is no need for demanding any other supplementary framework or additional plugins. In the process, parts of applications are put in the angular framework which is not too complex for manipulation. In module separation, developers can load essential services in an effective way for the performance of automatic testing.

• Client-side situation: AngularJS mainly works at the client-side and it is fully compatible with both web and mobile browsers. It can function with any projects without the need for any backend notifications. The developers can easily use AngularJS for the front end of applications.

• Easy to use: AngularJS is rich with its features and facilitates developers to reduce any need for writing codes. It reduces the burden of developers by the application of MVC architecture and data models.

Many other significant features make AngularJS prioritize by the developers than other Javascript frameworks. The above-mentioned reasons have made it the top choice for reputed companies all across the globe for web development. Developers at the company master the skills to work with Angular JS development for web. The company is equipped with dedicated professionals having sound technical knowledge of working with AngularJS. We offer offshore services to extend our reach all across the globe with various models. We have more than 15 years of experience in the industry that we use to deliver high-quality solutions by leveraging the latest technology and quality standards.

Mobile App Development Company India | Ecommerce Web Development Company India

Mobile App Development Company India | Ecommerce Web Development Company India

Best Mobile App Development Company India, WebClues Global is one of the leading web and mobile app development company. Our team offers complete IT solutions including Cross-Platform App Development, CMS & E-Commerce, and UI/UX Design.

We are custom eCommerce Development Company working with all types of industry verticals and providing them end-to-end solutions for their eCommerce store development.

Know more about Top E-Commerce Web Development Company