Bacancy Bacancy
  • Customers

      Fortune 500 Clients

      Verizon
      Verizon
      Franklin Templeton
      Franklin Templeton
      The Container Store
      The Container Store
      KPMG
      KPMG
      Academy Sports & Outdoors
      Academy Sports & Outdoors
      Shell
      Shell
      Bangkok Bank Ltd
      Bangkok Bank Ltd
      The Children's Place
      The Children's Place
      Edward Jones
      Edward Jones
      United Parcel Service
      United Parcel Service
      AdviceWorks
      AdviceWorks
      NatWest Markets
      NatWest Markets
      Bridgestone
      Bridgestone

      Technologies

      React JS VueJS Angular JS React Native Flutter Full Stack
      Ruby on Rails Node JS Golang AI & ML Data Science Java
      Python Salesforce DevOps Block Chain Mobile App Embedded & Hardware
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • what we do

      Experience

      Digital Workplace Services Product Enhancement

      Insights

      AI & Automation Data Analytics

      Innovate

      Blockchain Software Engineering Services Internet of Things (IoT) Data Science Artificial Intelligence Machine Learning

      Accelerate

      Cloud - Bacancy Combalt Digital Process Automation Open Source Microsoft Dynamics Salesforce

      Assure

      Quality Assurance IT Staff Augmentation

      Embedded & Hardware

      Product Engineering Analog Design Services FPGA Engineering Service Wireless Design Embedded Software Design

      not list

      Hardware Engineering Power Engineering IoT Hardware
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • who we work with

      Industries

      Banking Financial services & Insurance Startups Oil & Gas

      not list

      Healthcare Life Science Real Estate & Construction Logistics
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • about us

      Culture

      Agile Mindset Bacancy Values Bacancy Culture

      About Company

      About Us Leadership Team Awards & Recognition Infrastructure

      not list

      Customer Reviews Our Locations Partnership Media Coverage

      WE ARE

      GREAT PLACE TO WORK - CERTIFIEDTM

      Building and sustaining High-Trust, High-Performance CultureTM

      Bacancy Great Place to Work
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • technology

      Front End

      Angular Reactjs Vue.js UI/UX

      Platforms

      MS Dynamics Salesforce

      Back End

      Ruby on Rails Node.js Golang Laravel .NET Java Python

      Mobile

      React Native Flutter Android iOS

      Cloud

      AWS DevOps

      QA

      Automation Testing Software Testing

      Embedded & Hardware

      Embedded
      bacancy

      World-class expertise,Delivered

      get quote
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • PRODUCTS

      EV Products

      Battery Management System Motor Controller AC Charger Explore All

      not list

      CCS2 Controller DC Fast Charger AC Charge Controller
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
hire developers

Bacancy

Bacancy represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

06

World wide offices

10+

Years of Experience

05

Agile Coaches

14

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

  • Customers
      Technologies
      • React JS
      • Angular JS
      • Vue JS
      • Node JS
      • AI & ML
      • Explore All
      Fortune 500 Clients
      • Verizon
      • The Container Store
      • KPMG
      • Academy Sports & Outdoors
      • Bangkok Bank Ltd
      • The Children's Place
      • Edward Jones
      • Franklin Templeton
      • AdviceWorks
      • NatWest Markets
      • Bridgestone
      • United Parcel Service
  • What we do
      Experience
      • Digital Workplace Services
      • Product Enhancement
      Insights
      • AI & Automation
      • Data Analytics
      Innovate
      • Blockchain
      • Software Engineering Services
      • Internet of Things (IoT)
      Accelerate
      • Cloud - Bacancy Combalt
      • Digital Process Automation
      • Open Source
      • Microsoft Dynamics
      • Salesforce
      • Service Experience Transformation
      Assure
      • Testing
      • Resource Augmentation
      Embedded & Hardware
      • Product Engineering
      • Analog Design Services
      • FPGA Engineering Service
      • Wireless Design
      • Embedded Software Design
      • Hardware Engineering
      • Power Engineering
      • IoT Hardware
      • AL/ML
  • who we work with
      Industries
      • Banking Financial services & Insurance
      • Startups
      • Oil & Gas
      • Healthcare Life Science
      • Real Estate & Construction
      • Logistics
  • About Us
      About Company
      • About Us
      • Leadership Team
      • Awards & Recognition
      • Infrastructure
      • Our Locations
      • Partnership
      Culture
      • Agile Mindset
      • Bacancy Values
      • Bacancy Culture
  • Technology
      Front End
      • Angular
      • Reactjs
      • Vue.js
      • UI/UX
      Platforms
      • MS Dynamics
      • Salesforce
      Back End
      • Ruby on Rails
      • Node.js
      • Golang
      • Laravel
      • .NET
      • Java
      • Python
      Mobile
      • React Native
      • Flutter
      • Android
      • iOS
      Cloud
      • AWS
      • DevOps
      QA
      • Automation Testing
      • Software Testing
      Embedded & Hardware
      • Embedded
      Explore All
  • Products
    • Battery Management System
    • Motor Controller
    • CCS2 Controller
    • AC Charger
    • DC Fast Charger
    • AC Charge Controller
    • Explore All
  • Careers
  • Work @ Bacancy
  • Blogs
  • Resources
  • Customer Reviews
  • Contact
  • Get Quote
Angular + Redux + RxJs = NGRX

How to build an Angular application using NgRx (Angular 8 + Redux)- Part 2

Dolly Shah
Dolly Shah Software Engineer
Last Updated on August 3, 2022
January 8, 2020 4 min read

In first part of the NgRx tutorial, we have covered the core concepts and detailed descriptions about what is NgRx; it’s a workflow and its need.

In the second installment, we will learn how to use actions, reducers, selectors, and effects in our application. So you will get an idea of how actually they are interrelated to each other.

So let’s get started.

In the following example, I will display the list(get) of users and add(post) a user using NgRx concepts. Also, I am going to change the state of the loader flag when HTTP request is called.

Before getting into the code, let’s see what we will be making.

Here is the Demo

GitHub Repository

ANGULAR CLI VERSION : “@angular/cli”: “~8.3.20”

Note: Add the Redux dev tools extension in your browser to check the store and state changes.

Install @angular/cli using the following command

npm i -g @angular/cli

Let’s create a new angular application.

ng new Ngrx-demo

ngrx
ngrx

After successfully creating the application, we will be adding the dependencies for @ngrx in our app.

npm install @ngrx/{store,effects,store-devtools}

And to make our application look better, we will be using ng-bootstrap and bootstrap package. It is not necessary, as you can add your own CSS framework or custom CSS.

npm install --save @ng-bootstrap/ng-bootstrap

Also, add the bootstrap package.

npm i bootstrap 

After successfully adding it, update your angular.json styles array.

 "styles": [
             "src/styles.scss",
             "node_modules/bootstrap/dist/css/bootstrap.min.css"
           ],

Now, let’s add these modules in our root module. i.e App Module

Are you looking to develop an Angular application using NgRx? Hire Angular Developer from us to build a reliable and robust Angular application with Angular 8 + Redux.

app.module.ts

StoreModule contains the state variable that holds our current state value. Here, users are our state variables. Generally, state variables are defined in selector.ts

EffectsModule loads the effects file when any action is dispatched.

NOTE: Here, I am using the below structure. It may vary according to your project structure.

EffectsModule

NOTE: I will be adding code in respective files. Kindly replace it with yours.

Now, let’s create a store folder to manage our NgRx flow in one place.

NgRx flow

actions.ts

In an action file, we take the enum type variable and assigns our actions to it. We need to create a class for each action that implements the Action interface.

In GetUserLoad = “[User] Get User,” there is no compulsion to write the string part(i.e. “[User] Get User”) But it is good practice to mention as it will help you to see which action leads to state changes in redux devtool extension.

It is a must to export the actions that I have done in the last line.

reducer.ts

In reducer, a type of action is being checked, and then our state gets updated.

effects.ts

Here, which effect gets called will be decided based on the action that is matched in ofType.

As in getUsers$, GetUserLoad action is dispatched from the get-user component.

We can also dispatch other actions here. Like, after a successful API call, it dispatches GetUserSuccess action and passing ‘user’ payload to it. Likewise, on failure, GetUserFail action gets dispatched with an error.

selector.ts

Selector helps in fetching and manipulating the data present in our current state. So here I am creating two const, first for getting all users and another for getting the first ten users.

index.ts

After completing the store folder, we will now add components, service, and interface. Let’s go!

ng g c get-user
ng g c post-user 

After successfully creating components, let’s add some code to it.

get-user.component.html

get.user.component.ts

post-user.component.html

post-user.component.ts

Now I am going to add a service file. Use the following command.

ng g service _services/users

This will create a users.service.ts file in a folder named _services.

 users.service.ts

Note: I am using fake rest APIs from https://jsonplaceholder.typicode.com/.

You can delete the users.spec.ts file as we are not going to write any test cases here.

users.service.ts

Now let’s add the interface file. Use the command below.

ng g interface _interfaces/users

This will create a users.ts file in a folder named _interfaces.

interfaces

user.ts

Now finally calling get-user and post-user components in app.component.html using their selector.

app.component.html

In app.component.html, delete all the starter code and add this code.

Finally, our coding part is done. Let’s run the application using the serve command.

ng s --port 4300

After compiling successfully, you will see this.

ngrx demo

That’s all!

I hope you enjoyed reading the blog post. Please, let me know your thoughts in the comment section below

Thank you and Happy Coding?


Expand Your Digital Horizons With Us.

Start a new project or take an existing one to the next level. Get in touch to start small, scale-up, and go Agile.


Or
E-mail us : [email protected]

Your Success Is Guaranteed !

Related Articles

angular micro frontends
Ritwik Verma
Harsh Koralwala

March 3, 2023

AngularJS

Everything You Need to Know About The Angular Micro Frontends Architecture

By : Ritwik Verma & Harsh Koralwala

Quick Summary: Technology surrounds us at every step of our traditional lifestyle. These technological surroundings evolve as time passes by. Every day a new technological...

12 Minute Read
Read More
Angular eCommerce
Ritwik Verma
Vivek Chhatbar

February 15, 2023

AngularJS

Why Angular eCommerce is perfect for Web App Development?

By : Ritwik Verma & Vivek Chhatbar

Quick Summary: Business owners strive to offer the best to their customers. The demand for Commerce portals has significantly increased as the market thrives. To...

9 Minute Read
Read More
Angular with AWS Combination
Ritwik Verma
Vivek Chhatbar

January 23, 2023

AngularJS

All You Need To Know About Angular With AWS Combination

By : Ritwik Verma & Vivek Chhatbar

Quick Summary: Every business owner, whether small or large, explicitly wants what's best for their business. Considering this approach, one thing that is taking a...

15 Minute Read
Read More
india India (HQ)

Corporate House
15-16, Times Corporate Park, Thaltej, Ahmedabad, Gujarat 380059

USA USA

601 Brickell Key Drive, Suite 700, Miami, Florida, 33131, USA

canada Canada

71 Dawes Road, Brampton, On L6X 5N9, Toronto

australia-flag Australia

351A Hampstead Rd, Northfield SA 5085

UAE UAE

1608 Clover Bay, Business Bay, Dubai, UAE. PO Box 62049

sweden Sweden

Junkergatan 4, 126 53 Hagersten


Great Place to Work
Get in Touch
call-yellow-icon

Contact Number

+1 347 441 4161

gmail-icon

Email Us

[email protected]


  • Bacancy Behance
  • Bacancy Uplabs
  • Bacancy Pinterest
  • Brochure
  • Quality Assurance
  • Resources
  • Tutorials
  • Customer Reviews
  • Privacy Policy
  • FAQs
  • Contact Us
  • Sitemap
  • Employee
bacancy google review 4.6
bacancy google review
bacancy glassdoor review 4.5
bacancy glassdoor review
bacancy clutch review 4.8
bacancy clutch review
bacancy goodfirms review 4.5
bacancy goodfirms review
X

Get Our Newsletter

Be The First To Get The Latest Updates And Tutorials.

Request A Free Consultation

Before You Go...

Try our free consultation to visualize the best outcome of your business ideas.

INSTANT 30 MIN FREE CONSULTATION CALL